Question

我在Chrome上使用后台大小，发现它是旧版IE不支持的CSS3。因此，我浏览了一些帖子，有人建议使用此过滤器：

progid:DXImageTransform.Microsoft.AlphaImageLoader

HTML：

<span class="num_blue_small small"><span class="numberText">4</span></span>

CSS：

.num_blue_small
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/images/num_blue_small.png',
    sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
 }

.small
{
    display: inline-block;
    height: 35px;
    width: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;

}

.numberText
{
    color: White;
}

通过实现“过滤器”，它在IE7中完美运行;但是，它在谷歌浏览器中变得不可见。

如果我在background: url(/images/num_blue_ssc.png) no-repeat; CSS类中加入.num_blue_small，它在Chrome中可以正常使用，但IE 7会显示2张不同大小的相同图片。

我该怎么办才能修好它？

Answer 1

你可以试试背景大小的polyfill

Louis Remi的

An IE behavior adding support for background-size to IE8.

渐进增强是我生活的口头禅。这意味着“玩得开心   用CSS3而不用担心IE8用户;他们永远不会注意到   他们错过了你华丽的文字 - 阴影和渐变，   无论如何”。

一切顺利，直到我发现背景大小的优雅：   覆盖;和background-size：包含;例如，第一个，   允许图像完全覆盖背景，而不必   在管道上发送1920x1080背景图像。

不幸的是，它们不会优雅地降级：网站很可能   对IE8用户来说是破碎的

他们提供这个功能：

正确的背景图像位置和大小
在浏览器调整大小时更新位置和大小
修改背景图像时更新的图像，位置和大小

但似乎有一些限制：

多个背景（虽然仍然可以使用后面的技巧）
4值背景位置的语法
background-repeat中的任何重复值
背景的非默认值 - [clip / origin / attachment / scroll]
当元素的尺寸发生变化时调整背景大小

IE和谷歌浏览器中的背景大小问题

1 个答案: