IE8 中的指南针精灵答案

【问题标题】：Compass sprites in IE8IE8 中的指南针精灵
【发布时间】：2014-03-11 05:52:32
【问题描述】：

几天前我刚开始使用 Compass 的精灵生成器，发现我的精灵没有出现在 IE8 中。我认为我的问题可以追溯到之前报告的问题：compass sprite is not working in ie8 and ie7

Santosh 指出，当使用 :not 之类的伪类时，IE8 会中断。

我可以看到我的选择器可能会损坏，因为 Compass 在选择器中包含 :checked 和 :before 伪类（来自 icons/global/*.png）：

input[type="checkbox"]:checked + .btn-checkbox:before, 
input[type="checkbox"].checked + .btn-checkbox:before, 
input[type="radio"]:checked + .btn-checkbox:before,
input[type="radio"].checked + .btn-checkbox:before,
.segmented-checkbox .btn-    checkbox.selected:before
{
  background: url(/assets/rp-icons/global-s67c66a3554.png) no-repeat;
}

我的问题是如何更改自动生成的选择器或将其拆分，以便整个事情不会在 IE8 中中断？

这里也提到了这个问题，但是解决方法不是很清楚： https://github.com/chriseppstein/compass/issues/1193

【问题讨论】：

标签： compass-sass sprite

【解决方案1】：

问题是： IE8无法理解:checked，导致整个声明无效。

你有两个选择：

#1 制作两次精灵

首先使用条件注释将.ie类添加到html或body中

<!--[if lt IE 9]> <html class="ie"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

第一行是 'lower than IE 9'，所以 IE8 或以下获取类ie。第二个是“大于 IE8”，因此 IE9+ 和其他浏览器（注意 <!-->）。

所以现在将你的精灵一分为二，一个用于:checked，另一个用于.checked，导入两次，所以最终的css是：

/*this will be invalid for IE<8, valid for all others*/
input[type="checkbox"]:checked + .btn-checkbox:before, 
input[type="radio"]:checked + .btn-checkbox:before,
.segmented-checkbox .btn-checkbox.selected:before
{
  background: url(/assets/rp-icons/global-{hash}.png) no-repeat;
}

/*this would be valid for everyone, but since we added .ie, just IE will apply*/
.ie input[type="checkbox"].checked + .btn-checkbox:before, 
.ie input[type="radio"].checked + .btn-checkbox:before,
.ie .segmented-checkbox .btn-checkbox.selected:before
{
  background: url(/assets/rp-icons/global-{hash}.png) no-repeat;
}

然后使用javascript创建一个处理程序，当单击输入时，如果它被选中，则添加选中的类；

#2 试试 polyfill 是否能为你解决问题：

你可以试试http://selectivizr.com/，它在所有支持的框架上都为:checked 提供了polyfill！所以它会让 IE8 接受你的:checked。 阅读页面末尾的“你需要知道”以了解其局限性

【讨论】：