08
2014
02

CSS hacks和IE hacks写法总结

这是个很常见的问题,而且让人烦躁的主题,css hacks! 你漂亮整洁代码的破坏者,维护成本提高的老鼠屎。好吧,但不得不说他存在时必要的,作为前端开发者如果你一直做的是新项目可能会用的比较少,但对于维护老项目的同学来说,hacks是解决浏览器必不可少的杀器之一。很久以前写过该方面的文章:

浅谈CSS hack区别IE6.IE7.FireFox的几种CSS HACK写法 ,IE的if条件注释Hack


前段时间为团队做新前端代码规则时又整理了一份最新的hacks表,记录下来。下面是CSS 对于各浏览器的一些hacks写法

#test
{
  width:300px;
  height:300px;
  background-color:blue;      /*firefox*/
  background-color:red\9;      /*all ie*/
  background-color:yellow\0;    /*ie8*/
  *background-color:pink;        /*ie7*/
  _background-color:orange;       /*ie6*/
}
:root #test { background-color:purple\9; }  /*ie9/ie10*/
@media all and (min-width:0px){ #test {background-color:black\0;} }  /* opera/ie11 */
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

下面是一些IE hacks也就是IE条件注释的一些写法,这里注意IE10以后已经不支持条件注释的写法了,可想而知,这就是个坟。不到万不得已的时候不要写这些hacks之类的东西来破坏代码。

<!--[if IE]>According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->

最后说一句:hacks虽然能快速解决问题,但不要滥用,这样维护成本直线上升,而且破坏代码生态。

« 上一篇下一篇 »

相关文章:

一段CSS控制文字禁止选择、复制代码惹得祸  (2010-8-9 16:22:13)

浅谈CSS hack  (2008-10-10 12:40:54)

区别IE6.IE7.FireFox的几种CSS HACK写法  (2008-10-10 10:40:45)

IE的if条件注释Hack  (2008-9-26 11:16:41)

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。