IE8的背景大小像素polyfil

Question

我需要使CSS3的背景大小在IE8中正常工作。有很多javascript库，但它们扩展了选项"cover"one_answers"contain"，而不是px值。当我使用图像精灵时，我需要以像素为单位设置背景大小。

这是我的代码演示。精灵图像是600px 400px，但我将背景大小设置为300px x 200px，这样在高密度显示器上看起来很清晰。

<a class="one">Link one</a>
<a class="two">Link two</a>
a {
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    width: 58px;
    height: 58px;
    background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
    background-size: 300px 200px; 
}    a.one {
    background-position: 0 0;
}
a.two {
    background-position: 0 -56px;
}

http://jsfiddle.net/rr2obdss/4/

我可以在不需要创建和维护第二个图像精灵的情况下将支持扩展到IE8吗？

Answer 1

根据您没有详细解释的具体情况，使用伪元素的变通方法是否可行？只需添加一个指定大小的伪元素，并将精灵作为背景？

如果位置绝对/相对和z索引的正确组合，这可能会起作用。

如果你提供更多的信息，说明你到底在努力实现什么，我将能够提供更好的帮助。

编辑：

好吧，所以我现在有了一个解决方案。有点像预期的那样：看起来很脏。但当你想在IE8:-P 中做一些花哨的事情时，你会得到这样的结果

a {
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    width: 58px;
    height: 58px;
    position: relative;
}
a:before {
    content: "";
    background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
    zoom: .5;
    text-indent: 0;
    overflow: hidden;
    width: 600px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
}
a.one:before {
    background-position: 0 0;
}
a.two:before {
    background-position: 0 -112px;
}

这样做的缺点是，你必须计算缩放因子，而不是只写下你想要的尺寸。背景位置也将相对于全尺寸背景。

我在上面的代码中做的事情有什么不清楚的地方吗？

Answer 2

您唯一能做的就是：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";

但如果您使用精灵图像，这可能会导致问题。

Answer 3

根据caniuse.com的说法，这种polyfill可能会有所帮助。

希望这能帮助。。。

--Lance