Question

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

Santosh指出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

Answer 1

问题是： IE8无法理解:checked，从而使整个声明无效。

您有两种选择：

＃1制作精灵两次

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

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

第一行是'低于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。 在页面末尾阅读“您需要了解”以了解其局限性

IE8中的指南针精灵

1 个答案:

＃1制作精灵两次

＃2尝试查看polyfill是否适合您：