在单独的 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]-->
但单独维护似乎一点吸引力也没有。闭包样式表报价 conditionals ,SASS/LESS 是否有类似的东西,或者您是否推荐完全不同的方法?
最佳答案
如果您可以生成 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 设置为默认 false 生成的文件。
此技术的灵感来自此处:http://jakearchibald.github.com/sass-ie/
关于css - 编译和维护特定于ie的样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28453177/