When we use CSS, the most troublesome thing is the compatibility of the various browsers. The different browsers will get different results when analysing the same CSS codes. Therefore, if we want to get better compatibility, we have to use CSS Hack. There are three types of CSS Hack we use most common.
1. "[if IE]" Hack
Grammar:
<!-- [if <keywords>? IE <version>?]>
CSS codes
<![endif]-->
(1) The "keywords" could be set the following values:
empty : make sure whether it is a version of IE
"gt" : greater than a certain version of IE (must be used with the second parameter "version")
"gte" : greater than or equal a certain version of IE (must be used with the second parameter "version")
"lt" : less than a certain version of IE (must be used with the second parameter "version")
"lte" : less than or equal a certain version of IE (must be used with the second parameter "version")
"!" : except a certain version of IE (must be used with the second parameter "version")
(2) As for the value of "version", I suggest using the number bigger than 6.
An example of "[if IE]" Hack:
<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->
In this example, we set the version of IE greater than IE6, it means we can only see the ".test{color:red;}" in the IE6+.
2. Attribute Hack
.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9, .Opera{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}
.webkit{[;property:value;];} /* For webkit(Chrome and Safari) */
We should look out some parts:
(1) There is no space between "\9\0" and value, if we add a space, the Hack can only be used in IE9+, and it will not work well in IE8.
(2) The Hack for Chrome and Safari has three ";", and must have three!
Let's see an example, you can use different browsers to see different color of ".text".
.test{
color:#c30; /* For Firefox */
[;color:#ddd;]; /* For webkit(Chrome and Safari) */
color:#090\0; /* For Opera */
color:#00f\9; /* For IE8+ */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */
}
3. Selector Hack
Some versions of browsers don't support a part of CSS selectors, so we have to use Selector Hack to solve this problem:
* html .test{color:#090;}
/* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
4. Some Hack skills
(1) "min-height": Sometimes we will use this attribute to set the mininum of an element, however, IE doesn't support it. So we should write like following:(using javascript in css codes)
div{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” ); }
(2) Clear float:
div{ display:table; }
or
div{ clear:both; }
or
div:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden; } // not IE
(3) Parent element's height doesn't match: the height of the outer layer cannot be adjusted automatically when the height of the inner object has been changed, especially when the inner object uses "margin" or "padding". Such as:
#box { background-color:#eee; }
#box p { margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>content</p>
</div>
The solution is adding two empty "div" before and after the "p" element. And then set css codes:
.emptydiv{ height:0px;overflow:hidden; }
(That's all)