Different understandings of CSS parsing will result in different page effects, and the page effects we need will not be obtained. We can write different CSS for different browsers according to this.
For example, IE6 can recognize the underscore "_" and asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and firefox cannot recognize both. etc
【Order of writing】
Generally, the CSS of the browser with strong recognition ability is written in the back
Browser priority: FF < IE7 < IE6 , CSS hack
The writing order is generally FF IE7 IE6
Take a look at the following example of div+css browser compatibility:
#demo {width:100px;}
* html #demo {width:120px;}
*+html #demo {width:130px;}
So in the end, the width of #demo is interpreted in three browsers as:
firefox:100px;
ie6:120px;
ie7:130px;
[Div+css browser compatibility skills:]
① Center vertically. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content.)
② Centered horizontally. margin: 0 auto; (of course not omnipotent)
③ If you need to add styles to the content of the a tag, you need to set display: block; (common in navigation tags)
④ The difference between FF and IE's understanding of BOX leads to a difference of 2px, as well as the problem of doubling the margin of div set as float under ie.
⑤ The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
⑥ Do not set the dead height of the div as an external wrapper, it is best to add overflow: hidden. to achieve height adaptation.
⑦ About the hand cursor. cursor: pointer. And hand only applies to IE.
⑧ Setting padding to div under FF will cause width and height to increase, but IE will not. (Use !important to solve)
Note: CSS styles for firefox IE6 IE7
【Notice】
Now most of them use !important to hack, which can be displayed normally for IE6 and firefox tests, but IE7 !important can be interpreted correctly, which will cause the page not to be displayed as required! Find a good hack for IE7 is to use "*+html", now browse with IE7, there should be no problem
Now write a browser compatible CSS style:
#cshk{ height:20px; }
* html #cshk {height:50px; }
*+html #cshk {height:80px; }
Then the height is 20 under firefox, 50 under IE6, and 80 under IE7