区别 IE6、IE7、IE8、Firefox
Example
#tip {
background: blue; /* Firefox */
background: red \9; /* IE8 */
*background: black; /* IE7 */
_background: orange; /* IE6 */
}
Explain
因为 IE 系列浏览器可读\9，而 IE6 和 IE7 可读*，另外 IE6 可辨识_，因此可以依照顺序写下來，就会让浏览器正确的读取到自己看得懂的 CSS 语法，所以就可以有效区分 IE 各版本和非 IE 浏览器(像是 Firefox、Opera、Google Chrome、Safari 等)
CSS hack：针对 IE6，IE7，Firefox 显示不同效果做网站时经常会用到，衡量一个 DIV+CSS 架构师的水平时，这个也很重要。区别不同浏览器的 CSS hack 写法：
- 区别 IE6 与 FF：
background: orange;*background: blue;- 区别 IE6 与 IE7：
background: green !important;background:blue;- 区别 IE7 与 FF：
background: orange;*background: green;- 区别 FF，IE7，IE6：
background: orange;*background: green !important;*background: blue;
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | IE Edge | Firefox | |
|---|---|---|---|---|---|---|---|---|
* |
√ | √ | ||||||
!important; |
√ | √ | √ | √ | √ | √ | √ | |
_ |
√ | |||||||
\9 |
√ | √ | √ |
*+html 与 *html
*+html 与 *html 是 IE 特有的标签, Firefox 暂不支持.而*+html 又为 IE7 特有标签。
#wrapper {
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* IE6 fixed */
*+html #wrapper { width: 60px;} /* IE7 fixed */
}
注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">