1. "The use of important in IE6 and FF"
.box1 {width:150px !important;}
.box1 {width:250px;}
!important means that this setting has priority. IE will not make an error when encountering !important and just ignore its function. If width is set later, IE will take the last set width as the criterion. If there are no other settings later, it will Use the current value, which is the previous !important value. For example: #test {width: 300px !important}Both IE and FF display 300PX. If there is a value at the end, IE will display the following value, and FF will display the value with !import in front!
Other browsers consider this important. Because of the priority relationship, the previously set width always prevails.
#test {width:300px;width:400px !important ;}
The result displayed in this sentence is that the width of IE and FF is both 400PX
#test {width:300px !important ;width:400px;}
The display result of this sentence is FF: 300px IE: 400px
Therefore, when using !important, put the words containing !important in front.
But the problem comes again, IE7 can already recognize !important, please see below!
2. CSS styles for firefox ie6 ie7
Nowadays, most of them use !important for hacking. The ie6 and firefox tests can display normally, but ie7 can interpret !important correctly, which will cause the page not to be displayed as required! I found a good hack for IE7 using "*+html". Now browse it with IE7 and there should be no problem.
Now write a CSS like this:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7. You can use "+" to implement CSS Hack that is only recognized by IE. Some friends may think of using "_" Hack , but they are distinguished because "_" is not recognized in IE7. So use +
Test results:
IE5.5, IE6 and IE7 browsers can recognize it;
FF2.0, Opera 9, and Safari 2 browsers do not recognize it.
3. IE7 hack
IE7 has fixed many bugs and added support for some selectors, so now hacks for hiding or displaying IE such as *html {}, html>body {}, !important, etc. will not work in IE7. Although CSS Hack is not recommended and conditional comments are a foolproof filter, conditional comments can only appear in HTML, so CSS Hack still has its place. Nanobot discovered some CSS Hacks for IE7, specifically:
>body
html*
*+html
Of these three writing methods, the first two are illegal CSS writing methods and are ignored in standard-compliant browsers, but IE7 does not think so. For >body, it will replace the missing selector with the global selector *, that is, it will be processed into *>body, and this phenomenon also exists not only for the > selector, but also for the + and ~ selectors. For html*, since there is no space between html and *, it is also a CSS syntax error, but IE7 will not ignore it, but mistakenly believes that there is a space here. For the third type *+html, IE7 believes that the DTD declaration in front of html is also an element, so html will be selected. Among these three methods, only this method is legal CSS writing, which means it can pass the validator. Verification is therefore also a hack usage recommended by the author.
Internet Explorer 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
4. IE and FF have different interpretations of the box model. Code description: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
The bandwidth displayed by test is 650px
The total width of IE Box is: the sum of the widths of width+padding+border+margin. The total width of FF Box is the width of width, and the width of padding+border+margin is included in width.
If there is BOX{WIDTH:"300"; PADDING:"5PX";}, the width of the BOX in IE should be: 310. The width of FF is 300, so when the BOX is filled, you should use BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, so as to ensure that the width of the BOX is always 300px, and There will be no phenomenon of being stretched, and in FF there will be no situation where the floating layer is not fully filled.
5. The ul tag has padding value in Mozilla, but only margin has value in IE.
Set ul{margin:0;padding:0}
6. IE cannot distinguish the difference between inheritance relationship and father-son relationship. They are all inheritance relationships.
7. Setting padding on a div in FF will cause the width and height to increase, but IE will not. (can be solved with !important)
8. Centering problem
1. Vertically center. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content.)
2. Horizontally centered. margin: 0 auto; (of course not universal)
3. If you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags)
4. The difference in the understanding of BOX between FF and IE leads to a 2px difference and problems such as the margin of a div set to float doubling under IE.\
5. Different performances of UL:
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)
6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptation.
9. Regarding the hand cursor, it only applies to IE. If both IE and FF recognize it, please use cursor: pointer.