html - IE 和 Google Chrome 中的背景大小问题

Question

我在 Chrome 上使用背景大小，发现它是 CSS3，旧版本的 IE 不支持它。因此我浏览了一些帖子，有人推荐使用这个过滤器:

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下完美运行；但是，它在 Google Chrome 中变得不可见。

如果我在 .num_blue_small CSS 类中包含 background: url(/images/num_blue_ssc.png) no-repeat;，它将在 Chrome 中正常工作，但在 IE 7 中将显示 2 张不同尺寸的相同图片。

我应该怎么做才能修复它？

Answer 1

你可以试试背景大小的 polyfill

An IE behavior adding support for background-size to IE8. 路易·雷米

Progressive Enhancement is the mantra I live by. It means "Have fun with CSS3 and don't worry about IE8 users; they'll never notice they're missing out on your gorgeous text-shadows and gradients, anyway".

All was well until I discovered the elegance of background-size: cover; and background-size: contain;. The first one, for instance, allows an image to completely cover a background, without having to send a 1920x1080 background image down the pipes.

Unfortunately, they don't degrade gracefully: websites would likely appear broken to IE8 users

他们提供该功能:

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

但似乎他们有一些限制:

• 多个背景(尽管仍然可以使用 :after 技巧)
• background-position 的 4 值语法
• background-repeat 中的任何重复值
• background-[clip/origin/attachment/scroll] 的非默认值
• 当元素尺寸改变时调整背景大小