Question

在单独的CSS文件中维护IE变通办法的常见做法是什么？我在谈论通过其他方式解决的更深层次的问题（例如包括替代图像网址）使用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]-->

但是单独的维护似乎并不吸引人。关闭样式表提供conditionals，对于SASS / LESS是否有类似的东西，或者你推荐的是完全不同的方法吗？

Answer 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;

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

这里找到了对这种技术的启发：http://jakearchibald.github.com/sass-ie/

Answer 2

您可以使用JavaScript根据浏览器和其他内容向HTML添加类 - 我觉得这些非常有用！这是我使用的http://rafael.adm.br/css_browser_selector

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

2 个答案: