IE8的背景大小像素polyfil？

作者: 时间
发布时间: 2024-01-20 04:29:44 (3月前)
转自：

4 条回复

0#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 根据具体情况，您没有详细解释，伪元素的解决方法可能有效吗？只需添加指定大小的伪元素，并将精灵作为背景？ </p> <P> 通过位置绝对/相对和z-index的正确组合，这可以起作用。 </p> <P> 如果您提供有关您要实现的目标的更多信息，我将能够提供更好的帮助。 </p> <P> 的<strong> 编辑： </强> </p> <P> 好的，所以我现在得到了一个解决方案。如预期的那样：看起来很脏。但是当你想在IE8中做一些奇特的东西时，你就会得到这样的东西:-P </p> <pre> <code> 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; } </code> </pre> <P> 这样做的缺点是，您必须计算缩放系数而不是仅记下您想要的尺寸。然后，背景位置将与全尺寸背景相关。 </p> <P> 我在上面的代码中做了什么，有什么不清楚的吗？ </p> </DIV>

编辑
1#
回复此人
大黑骡子王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你唯一能做的就是： </p> <pre> <code> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='image.gif', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='image.gif', sizingMethod='scale')"; </code> </pre> <P> 但是，如果您使用精灵图像，这可能会导致问题。 </p> </DIV>

编辑
2#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 根据 <a href="http://caniuse.com/#search=background-size" rel="nofollow"> caniuse.com </A> ， <a href="https://github.com/louisremi/background-size-polyfill" rel="nofollow"> 这种polyfill </A> 可能有帮助。 </p> <P> 希望这可以帮助... </p> <P> - 兰斯 </p> </DIV>

编辑

登录后才能参与评论