Question

我需要让CSS3的后台大小在IE8中正常工作。有很多javascript库，但它们扩展了选项“cover”和“contains”而不是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-index的正确组合，这可以起作用。

如果您提供有关您想要达到的目标的更多信息，我将能够提供更好的帮助。

修改

好的，所以我现在得到了一个解决方案。如预期的那样：看起来很脏。但是当你想在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，this polyfill可能会有所帮助。

希望这会有所帮助......

- Lance

IE8的背景大小像素polyfil？

3 个答案: