General method for perfect compatibility IE6/IE7/FF
Internet is a bit related to HACK, by the way go to my blog for easy access later.
1, CSS HACK
The following two methods to solve almost all the current HACK.
1,! Important
With IE7 on! Important support,! Important method is only for IE6 the HACK. (Note the wording. Remember the location of the statement in advance.)
<style>
# Wrapper (
width: 100px! important; / * IE7 + FF * /
width: 80px; / * IE6 * /
</ Style>
2, IE6/IE77 on FireFox
* + Html and * html is IE-specific tags, firefox not support. And * + html tag it is specific to IE7.
<style>
# Wrapper (width: 120px;) / * FireFox * /
* Html # wrapper (width: 80px;) / * ie6 fixed * /
* + Html # wrapper (width: 60px;) / * ie7 fixed, pay attention to the order * /
</ Style>
Note:
* + Html on IE7's HACK must ensure that the top of the following HTML statement:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
Second, universal float closed (very important!)
The principle of clear float, see [How To Clear Floats Without Structural Markup]
Global CSS code by adding the following in addition to the need to close the div class = "clearfix" can it happened.
<style>
/ * Clear Fix * /
. Clearfix: after (
content :".";
display: block;
height: 0;
clear: both;
visibility: hidden;
)
. Clearfix (
display: inline-block;
)
/ * Hide from IE Mac \ * /
. Clearfix (
display: block;
) / * End hide from IE Mac * /
/ * End of clearfix * /
</ Style>
Third, other compatible technique (again???
1, FF padding next to the div set width and height would result in an increase, but IE will not. (Available! Important to solve)
2, center problem.
1). Vertically centered. Will line-height set to the current div the same height, and then through the vertical-align: middle. (Note that the contents do not wrap.)
2). The level of the middle. Margin: 0 auto; (of course not a panacea)
3 For the content to a label with style, need to set display: block; (common in navigation label)
4, FF and IE on the BOX to understand the differences were lead to a difference of 2px div set to float the lower margin in ie double and so on.
5, ul tag in FF have the following default list-style, and padding. Best to state that in order to avoid unnecessary troubles. (Common in navigation labels and content of the list)
6, as the outside wrapper of the div height will not be dead, but also a overflow: hidden. In order to achieve a high degree of adaptive.
7, on the hand-shaped cursor. Cursor: pointer. The hand is only applicable to IE.