兼容IE6/IE7/IE8/FireFox的css hack_html/css_WEB-ITnose
程序员文章站
2024-01-31 22:49:16
...
.color{ background-color: #CC00FF; background-color: #FF00009; *background-color: #0066FF; _background-color: #009933; }
**记住上面得样式解释为顺序是 ff、ie8、ie7、ie6 ** 显示的结果: 用火狐浏览,颜色是紫色 用 IE8 浏览,颜色是红色 用 IE7 浏览,颜色是蓝色 用 IE6 浏览,颜色是绿色
IE8 最新css hack: "" 例:"margin:0px auto;".这里的""可以区别所有IE和FireFox. "9" 例:"margin:0px auto9;".这里的"9"可以区别所有IE和FireFox. "*" IE6、IE7可以识别.IE8、FireFox不能. "_" IE6可以识别"_",IE7、IE8、FireFox不能.
一些IE6 IE7 IE8 FF的CSS hack
p{+color:#f00;} 支持 IE6 IE7 不支持FF IE8p{_color:#f00;} 支持 IE6 不支持FFp{color:#00f !important;}p{color:#f00;} 支持 IE7 IE6 FF IE8p{color:#00f !important;color:#f00;} 支持 IE7 IE8 FF 不支持 IE6head:first-child+body p{color:#f00;} 支持 IE7 IE8 FF 不支持 IE6
各浏览器CSS hack兼容表:
IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
!important | Y | Y | ||||
_ | Y | |||||
* | Y | Y | ||||
*+ | Y | |||||
9 | Y | Y | Y | |||
Y | ||||||
nth-of-type(1) | Y | Y |
小知识:什么是CSS hack? 由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
推荐阅读
-
兼容IE6/IE7/IE8/FireFox的css hack_html/css_WEB-ITnose
-
问一个简单的css滚动条宽度兼容IE7和IE6的问题._html/css_WEB-ITnose
-
ie6/ie7 css兼容性问题_html/css_WEB-ITnose
-
ie6/ie7 css兼容性问题_html/css_WEB-ITnose
-
IE6兼容inline-block的方法_html/css_WEB-ITnose
-
Css样式兼容IE6,IE7,FIREFOX的写法_html/css_WEB-ITnose
-
,关于IE8兼容HTML5 CSS3 还有@media的问题_html/css_WEB-ITnose
-
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
-
区分IE6,IE7,firefox的CSS hack
-
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法