2

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

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

.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 提供条件，SASS/LESS 是否有类似的东西，或者您是否推荐完全不同的方法？

4

2 回答 2

5

如果您可以生成 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 版本提供 $ie-only 设置为 true 的生成的 css 文件，并且每个其他浏览器都会获取生成的 $ie-only 设置为默认值 false 的文件。

在这里找到了这种技术的灵感：http: //jakearchibald.github.com/sass-ie/

于 2012-09-07T16:45:11.960 回答
0

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

于 2012-08-27T03:26:20.947 回答