IE8中的指南针精灵
我几天前才开始使用指南针的精灵生成器，我意识到我的精灵没有在IE8中显示出来。我想我的问题可以追溯到之前报道的这个问题：compass sprite is not working in ie8 and ie7
Santosh指出，当使用像:not这样的伪类时，IE8会中断。
我可以看到我的选择器可能正在中断，因为指南针在选择器中包含了:checked和: breaking伪类(来自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
回答 1
Stack Overflow用户
发布于 2014-03-11 05:52:33
问题是: IE8无法理解:checked，因此导致整个声明无效。
您有两个选择：
#1制作两次精灵
首先使用条件注释将类.ie添加到html或正文中
<!--[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。请阅读页末的“You need to know”，了解其局限性
https://stackoverflow.com/questions/22187656
复制相似问题
腾讯云开发者
