为 IE 单独写 CSS 的几种方法

因为万恶的 IE 存在各种的不标准,因此,在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS(Conditional Stylesheets),下面,不妨讨论一下这两种方法的优缺点。

IE hacks

举个例子,一个元素在其他浏览中的左边距是 30px ,而在 IE6 中则设置为 20px ,可以如下编写:

.demo {margin-left: 30px; _margin-left: 20px; }

对我个人而言,喜欢条件注释 CSS 是胜于 IE hacks ,光是 IE hacks 里面带有“hacks”这个单词已经让人很不舒服,总觉得这是偏方,而且是很偏的解决方案。但是,IE hacks 也有它的优点——

  • CSS hacks 内嵌在普通的 CSS 里面,不会产生更多 HTTP 请求。
  • CSS hacks 内嵌在普通的 CSS 里面,编写时比较方便。

当然,它的缺点也很明显——

  • 它是不标准的产物。
  • 内嵌在其他 CSS 中,不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。
  • 内嵌在其他 CSS 中,即使在非 IE 浏览器中也会被加载,浪费资源。

条件注释 CSS

同样是上面的例子,如果使用条件注释 CSS ,可以如下编写:

HTML

<!--[if IE 6 ]>
    <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
<![endif]-->

ie6.css

.demo {margin-left: 20px; }

这里说明一下:条件注释是一种 IE 专有的、对常规(X)HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说,它也是不标准的产物,但它是微软官方推出的针对 IE 进行开发的方式,并且条件注释对于其他所有浏览器作为常规注释出现,因此对其他浏览器无害。

条件注释 CSS 的好处是在独立的 CSS 文件中编写,能准确控制在特定的 IE 中加载,不会造成资源浪费,并且便于维护。缺点就是会产生多余的 HTTP 请求,尤其是当你需要兼容的 IE 版本很多的时候,你就需要产生多个 HTTP 请求,这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。

显然,以上两种方法都不是很好的方法,因此,接下来介绍一种相对来说更好的解决方案。

条件注释 html 标签

这种方案也是利用条件注释,但并不是对 CSS 使用条件注释,而是对 html 标签使用条件注释,引入不同的 class ,从而区分不同的 IE 以及其他浏览器。例如:

<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->

然后把针对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可。例如上面的例子则可以在 CSS 文件里编写:

.ie6 .demo {margin-left: 20px; }

这种方法吸收了条件注释表达式的好处同时又不会产生多余的 HTTP 请求,只是由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起,即不是相应的 IE 也会被加载,因此如果 CSS 数目比较多的话就会像使用 hacks 那样,造成浪费,开发者需要根据具体情况选择方法。

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html

评论列表

  • 评论者头像
    回复

    IE真是锻炼人的思维

  • 评论者头像
    回复

    条件注释开发和维护起来比较麻烦,尤其是CSS体积膨胀臃肿之后。

    前端重构现在都还处在刀工火种的时代,啥时步入机械化大生产呢…

    • 评论者头像
      回复

      @独自流浪 条件注释也好,hacks 也好,当 CSS 的数量很大之后都不再是好办法,只有当低版本的 IE 真正退出市场才能解决问题了!

  • 评论者头像
    回复

    IE一日不死,我等一日烦心

    • 评论者头像
      回复

      @S-kias 其实真正万恶的也只是IE6、IE7、IE8,在它们基本消失之前,也就只能继续折腾了!

  • 评论者头像
    回复

    我们北京那边同事给到我这里一个共同的css居中代码:margin-left:auto; margin-right: auto;
    我请示领导能否把这个改成:margin: 0 auto;领导说请别冒犯别人!继续使用!
    感觉道不同不相为谋

    • 评论者头像
      回复

      @airoschou 只能说跟连一点技术都不懂的领导合作很容易就会出现这种情况。。

    • 评论者头像
      回复

      @airoschou 噗。。这领导真逗! :-?

    • 评论者头像
      回复

      @airoschou 其实CSS居中用position左定位50%+左边负边距兼容性更好,margin: 0 auto;在ie5、6下不管用

      • 评论者头像
        回复

        @S-kias 个人觉得 margin: 0 auto 更优,ie5.5、ie6 可以用 text-align: center 解决,position: absolute 需要指定父元素增加 position: relative ,自身也会脱离文档流并产生新的 BFC ,对附近的 HTML 结构产生了很多其他影响!

    • 评论者头像
      回复

      @airoschou
      CSS的覆盖性,margin-left:auto; margin-right: auto;这样写比缩写好,除非你真的需要把margin-top和margin-buttom也设置为0。
      缩写代码体积减少不了多少,但是当需要设置margin-top为非0值的时候,还需要另外设置。
      当然,工具压缩成的缩写不算

  • 评论者头像
    回复

    其实我到是用的第一种方法。

    • 评论者头像
      回复

      @wmtimes 建议你需要 hacks 的部分如果不是特别少还是换到另外两种方法吧,不然以后维护时会是恶梦!

  • 评论者头像
    回复

    代码,永恒的伤不起!!!!

  • 评论者头像
    回复

    博主的右侧应该增加一个返回顶部的按钮
    要不然有些不方便!

    • 评论者头像
      回复

      @折子戏 页脚有返回顶部的按钮,因为这次的设计想尽量简洁,个人感觉返回顶部按钮有就好了,不必在右侧固定位置!

  • 评论者头像
    回复

    IE好淫荡~~祝IE早点死掉~~

  • 评论者头像
    回复

    天朝是个神奇的国家,从ie6countdown来看还占24%。:(

  • 评论者头像
    回复

    要是我的话。。。直接说不兼容IE就好了

    • 评论者头像
      回复

      @Aivier 还有很多孩纸身处在IE6的水深火热之中,不能说不兼容就不兼容啊!

      • 评论者头像
        回复

        @Kayo :cry: 我估计我这水平写出来的网页,想不兼容都难

  • 评论者头像
    回复

    输入回复内容 :?: 对IE的感情似乎也就那样了。。

    • 评论者头像
      回复

      @小A 对IE6乃是痛觉万分,但无奈市场份额在那里,适当的兼容还是要的!

  • 评论者头像
    回复

    过来学习一下,IE是个令人头疼的问题

  • 评论者头像
    回复

    FireFox,opera的hack呢?

    • 评论者头像
      回复

      @OneDou Firefox ,Opera 的 hack Goggle一下就都有了,不过这些现代浏览器一般不会有什么问题,在用 hack
      之前还是先尽量改一下本身的代码吧!

  • 评论者头像
    回复

    为IE单独写css样式不是很可取,而且现在流行css3和html5,很多效果只能针对IE9及以上做,根本不考虑IE9以下的了。

    • 评论者头像
      回复

      @前端开发 其实主要看项目的目标使用人群,如果目标使用人群不用考虑 IE8-,那么项目中也大可以完全不考虑兼容 IE8-,但如果使用人群中 IE6/7/8 的人还有,哪怕不多,我觉得还是需要兼容的。而且,最近三个月内 IE6 的市场份额 10.92%,IE8 是 33.46%

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O