1

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

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

<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 的支持吗？

4

3 回答 3

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;
}

这样做的缺点是，您必须计算缩放因子，而不仅仅是写下您想要的尺寸。然后背景位置也将与全尺寸背景相关。

我在上面的代码中所做的事情是否不清楚？

于 2014-11-21T22:25:57.643 回答
0

你唯一能做的就是：

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

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

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

于 2014-11-21T21:33:58.127 回答
-1

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

希望这可以帮助...

——兰斯

于 2014-11-10T23:00:54.510 回答