CSS Style Firefox/Safari/Chrome
i have a problem with css differences between browsers. i have a simple input textfield an a submit button. the should be arranged. with webkit (safari/webkit) everything looks fine but firefox doesnt do it. does anyone have an idea whats wrong?
开发者_JS百科i have written a little test html page:
<html>
<head>
<style type="text/css">
#input {
background: none repeat scroll 0 0 white;
border-color: #DCDCDC;
border-style: solid;
border-width: 1px 0 1px 1px;
font: 13px "Lucida Grande",Arial,Sans-serif;
margin: 0;
padding: 5px 5px 5px 15px;
width: 220px;
outline-width: 0;
height: 30px;
}
#submit {
background: none repeat scroll 0 0 white;
border: 1px solid #DCDCDC;
font: 13px "Lucida Grande",Arial,Sans-serif;
margin: 0;
outline-width: 0;
height: 30px;
padding: 5px 10px;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
You're not using a Doctype, so browsers fall back to quirks mode:
In the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7 and 8, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.
What are you trying to do with the background of the box? It looks really complicated for just having a white background if that's what it is, in which case, your page could be simplified to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">
#input, #submit {
background-color: #fff;
border: 1px solid #DCDCDC;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
After adding your correct DOCTYPE: also implement the YUI(R)eset CSS File witch will standardised the major css difference browser tend to have different.
http://developer.yahoo.com/yui/reset/
This will give you what we call a "clean slate", After you have imported the YUI(R) You should define your defualt css values such as padding,margin,a,img etc your self and then continue to build your design.
Thanks for your infos, but I have the same problems :(
I have also simplified this a little bit:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
<style type="text/css">
#input {
background: none repeat scroll 0 0 white;
border: 1px solid #DCDCDC;
}
#submit {
background: none repeat scroll 0 0 white;
border: 1px solid #DCDCDC;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
I have now a working version! thanks for your help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
input {
background-color: #fff;
border: 1px solid #dcdcdc;
font: 13px "Lucida Grande", Arial, sans-serif;
margin: 0;
outline: none;
}
input#input {
border-right-width: 0;
padding: 5px 5px 5px 15px;
width: 220px;
}
input#submit {
padding: 4px 10px;
}
</style>
</head>
<body>
<input id="input" type="text" value="" /><input id="submit" type="button" value="Add" />
</body>
</html>
I've found setting a height and width properties value for the input tag fixes the difference between the browsers.
加载中,请稍侯......
精彩评论