调整字号

IE的CSS hack及条件注释

对于搞前端的同学们来说,实现跨浏览器的兼容,IE是一个大麻烦。可是鉴于低版本IE在国内不可忽视的占有率,我们还是需要好好掌握一些CSS hack。

总结了一些针对IE6-9的属性值hack:

.foo{
     color:green\9;    /* 所有IE */
     color:green\9\0;  /* IE9 */
     color:green \0;   /* IE9 */
     color:green\0;    /* IE8,9 */
    *color:green;      /* IE6,7 */
    +color:green;      /* IE6,7 */
    _color:green;      /* IE6 */
}

还有一种是选择器hack。对IE6可以用 * html ,如下

* html .foo{ color:green; } /* IE6可识别 */

对IE7可以用 *:first-child+html*+html

*:first-child+html .foo{ color:green; } /* IE7可识别 */
            *+html .foo{ color:green; } /* IE7可识别 */

微软推荐使用的方法则是条件注释。因为以上的hack并不是规范化的做法,无法通过 W3C 的 CSS 校验。条件注释的写法如下:

<!--[if IE]>
IE浏览器都可见。
<![endif]-->

<!--[if IE 7]>
IE7可见。
<![endif]-->

<!--[if lt IE 8]>
IE8以下的浏览器(不含IE8)可见。(lt意为less than)
<![endif]-->

<!--[if lte IE 8]>
IE8及其以下的浏览器可见。(lte意为less than or equal to)
<![endif]-->

<!--[if gt IE 7]>
IE7以上的浏览器(不含IE7)可见。(gt意为greater than)
<![endif]-->

<!--[if gte IE 7]>
IE7及其以上的浏览器可见。
<![endif]-->

以上代码在IE以外的浏览器中只是普通的HTML注释,没有任何作用。另外也可以使用三种运算符!&|

<!--[if !(IE 7)]>
IE浏览器(IE7除外)都可见。
<![endif]-->

<!--[if (gt IE 6)&(lt IE 8)]>
IE7可见。
<![endif]-->

<!--[if (IE 6)|(IE 8)]>
IE6和8可见。
<![endif]-->

以上所说的条件注释在除IE以外的浏览器中都只是普通的注释,不会被显示在页面上。如果需要让IE之外的其他浏览器解析其中的代码,例如,想要针对IE浏览器隐藏某些代码,而在其他浏览器中显示,可以这样写:

<![if !IE]>
IE浏览器不可见。
<![endif]>

以上是默认的微软语法,IE浏览器会主动忽略中间的内容,而其他浏览器则会进行解析。但是首末两行不是合法的HTML标签。其他浏览器因为无法识别,才会忽略掉这两行,而显示出中间的内容。为了兼容W3C标准,有如下的一种写法:

<!--[if !IE]>-->
IE浏览器不可见。
<!--<![endif]-->

以上的代码是符合Web标准的,这时if 和 endif 语句单独成为两条HTML注释,IE之外的浏览器会解析中间的代码,而IE仍然会忽略掉。但是这样的写法只适用于 if !IE 的情况。如果if后的判断语句为真,例如下面的代码:

<!--[if IE 9]>-->
IE9和其他浏览器可见。
<!--<![endif]-->

原意是要在IE9和除IE外的其他浏览器中显示文字。但在IE9中会发现,文字前会多出-->这几个字符。因此需要再次修改:

<!--[if IE 9]><!-->
IE9和其他浏览器可见。
<!--<![endif]-->

这样就没有任何问题了,在所有浏览器中都正常。

需要注意的是,IE10在标准模式下不再支持条件注释(兼容性视图仍然支持)

还没有评论,沙发空缺中……
flight