Cross-browser design – You must understand the browser default style (User Agent Stylesheet) _css

Http://www.w3cways.com/898.html

Different browsers are not consistent with the default styles for the same elements, which is why we write the * {padding:0;marging:0} at the very beginning of the CSS;

But that's not all I'm saying right now. Basically, the two browsers of different cores have differences in the performance of some elements, such as the size of indents, font selection, character styles, and so on. Maybe a nice CSS stylesheet is doing well on one browser, and even without CSS bugs in another browser, I'm in the browser default style.

Therefore, when we generate CSS style rules, one of the necessary steps is to reset the default style of the browser, that is, to overwrite the default style of the browser. Unlike the use of * {padding:0;margin:0}, not all elements have padding and margin differences (element lists, ordered lists on the internet The difference between Xplorer and Firefox is that their indentation uses margin indentation and padding indentation. For example, the following code:

Headlines are very important Elements in XHTML

The font that this code uses in Internet Explorer is the Times New Roman, and the system default font is used in Firefox and opera. So we want to

set a uniform style in CSS.

However, if we simply set the global style using the wildcard character "*" like the * {padding:0;margin:0}, then an obvious problem arises, such as form elements, input elements, TextArea and so on in some browsers will ignore their reset, more importantly, this will seriously damage the appearance of these elements, so you have to go manually to one by one for them to reset a padding value and margin value. So we should give up simply to use "*" instead of resetting the first element with inconsistent performance, such as Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, and so on.

Also, the default style of an element may damage the appearance of the page. For example, elements will be bold text,

will be large indentation, will make the text tilt, and so on, if you want to require a consistent appearance of the page text, you should also in the CSS to the appearance of these elements to be reset. At the same time, sometimes we require that these elements look like the parent element, and can be inherited directly from the parent element using inherit.

As to which elements should be reset. Yahoo! has made a comparative summary for us. According to Yahoo's advice, you need to place these rules in a separate file named Reset.css (recommended):

Html{color: #000; background: #FFF;} 
Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
Table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
Address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
Font-weight:normal; 
} 
Ol,ul { 
list-style:none; 
} 
caption,th { 
text-align:left; 
} 
H1,h2,h3,h4,h5,h6 { 
font-size:100%; 
Font-weight:normal; 
} 
Q:before,q:after { 
content: '; 
} 
abbr,acronym {border:0; 

All you have to do is simply save the rules to reset.css and use them on the page. When you need to add new styles to these elements, there is no difference between the settings of the other elements.

Note: The input,textarea,select{*font-size:100% in the above reset.css is only accessible to Internet Explorer, so that the setting is to make the Internet The size of the form control font can be scaled in the explorer.