编译和维护特定于 ie 的样式表答案

【问题标题】：Compiling and maintaining ie-specific stylesheets编译和维护特定于 ie 的样式表
【发布时间】：2012-08-21 13:50:03
【问题描述】：

在单独的 CSS 文件中维护 IE 变通办法的常见做法是什么？我说的是通过其他方式解决的更深层次的问题（例如包括替代图像 url使用 base64 编码的嵌入式资源；boxsizing.htc 解决方法等）注意：在考虑 dataURI 与 vanilla spriting 时我比较保守，所以只有几个

有时我不得不求助于类似于

的代码

.some-class-lets-say-datepicker {
  background-image: url(data:image/png;base64,/*encoded image*/);
  *background-image: url(../gfx/lets-say-datepicker-icon.png);
}

编码的图像字符串平均为 100~300 个字符。鉴于上面的代码，这会导致一些冗余流量 - 兼容浏览器下载冗余 URL，以及 IE7 下载单独图像请求顶部的 base64 字符串。我发现这对两者来说都是微不足道的（毕竟，IE7 用户有更大的问题需要担心:)

同时以下内容 (?) 会更简洁：

<!--[if !IE]> -->
  <link href="main.css" rel="stylesheet" />
<!-- <![endif]-->
<!--[if lt IE 8]>
  <link href="main_ie.css" rel="stylesheet"/>
<![endif]-->

但单独维护似乎一点也不吸引人。 Closure-stylesheets 提供conditionals，是否有与 SASS/LESS 类似的东西，或者您是否推荐完全不同的方法？

【问题讨论】：

标签： css sass less

【解决方案1】：

如果您可以生成 2 个不同的样式表，Sass（版本 3.2+）可以相当轻松地做到这一点。

这是你的混音器：

$ie-only: false !default;

@mixin hide-from-ie {
    if $ie-only != true {
        @content;
    }
}

@mixin show-only-ie {
    if $ie-only == true {
        @content;
    }
}

在您的 SCSS 文件中：

.some-class-lets-say-datepicker {
    @include hide-from-ie {
        background-image: url(data:image/png;base64,/*encoded image*/);
    }

    @include show-only-ie {
        background-image: url(../gfx/lets-say-datepicker-icon.png);
    }
}

制作一个单独的仅 IE 文件来导入您的其他 SCSS 文件，但在顶部有这个：

$ie-only: true;

使用条件 cmets 为旧 IE 版本提供 $ie-only 设置为 true 的生成的 css 文件，并且每个其他浏览器都会获取 $ie-only 设置为默认 false 的生成的文件。

此技术的灵感可在此处找到：http://jakearchibald.github.com/sass-ie/

【讨论】：

【解决方案2】：

您可以使用 JavaScript 为基于浏览器和其他东西的 HTML 添加一个类 - 我发现这些非常有用！这是我用的http://rafael.adm.br/css_browser_selector

【讨论】：