CSS hack 汇总

说是CSS hack 汇总其实有点不妥,主要是用以记录CSS对于不同浏览器之间的区别对待.为啥不妥呢?因为平时很少用到,说也奇怪,我写出来的CSS code,从firefox出来以后,很少再对IE进行hack,例如写 flexhome 的时候,就没太大的变化,莫非是我写的比较标准? 现在,就把我所学到看到的东西整理出来供大家选择.若有错误的地方还请您帮忙斧正.ie6 must be die,我希望以后都用不到 css hack.

对于CSS hack,写法大致有两种方式,一是利用外部引入的方式;二是直接写在通用css文件里.第一种方式呢,是利用IE的if条件进行Hack,我很喜欢这样的写法(值得说明的是:你得写上DTD,否则会出现一些莫名其妙的问题):

• <!–[if IE]> <![endif]–>  :所有的IE浏览器都可识别
• <!–[if IE 6]> <![endif]–> :指定IE的版本
• <!–[if lt IE 7]> <![endif]–> :所有小于版本7的IE浏览器

这样写的好处呢,就是简单明了,不需要什么复杂的逻辑顺序.缺点就是使得 http requests 数量上升,要是负载超大型的应用上是不适合的.题外话,谷歌的网站好像是针对每一套不同的浏览器都有单独的一套css,chrome和safari是一个.

第二种 css hack 方法:

• IE6 : select {_background}

这样写是ie6特有的下划线支持,注意是写在属性的前面,而不是选择器.

• IE6,IE7 : *select或select {*background}

  这样写是针对的ie6和7,8没试过,不过据说ie8不能识别 “*” 和 “_” 的hack.

• IE7 : *+html select{background:#000 !important}

经过我的测试,html可以省略掉但是优先级就不好判断了,推测这个html只是元素html.IE7认识 “*+html” 也认识 “!important” 优先级 : (*+html + !important) > !important > *+html.

• firefox等其它浏览器: select{background:#000 !important}

!important的优先级大于没有此关键字的.

通常,hack都是按照firefox->ie6->ie7->其它浏览器 这个顺序来进行的.因为我们写的css是按照标准去写的,所以当然首先你得在FF浏览器下面显示正常了才能继续下一步.而写的时候也一样:正常的FF的写在前面,不正常的IE6的写在后面.至于其他的针对标准浏览器之间的区别对待方法就不太了解了,因为我写完了以后在ff下面正常的情况下,在其他浏览器下面还没有遇到不正常过.每个浏览器都提供一些自己的私有属性,等待后续学习吧.