IE 8:背景尺寸修复 [英] IE 8: background-size fix

问题描述

我曾尝试为 IE 添加背景大小，但它根本不起作用:

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt=""/></h2>

CSS:

div#content h2#news {背景: url('../images/news-background.jpg') 不重复；背景尺寸:100%；边框半径:20px；颜色:#fff;边距:20px 0 0 20px；填充:8px 20px；宽度:90%；-moz 背景尺寸:100%；-moz-border-radius: 20px;-webkit-background-size: 100%;-webkit-border-radius: 20px;}

过滤器有什么问题?

解决方案

正如 'Dan' 在一个类似的帖子中发布的那样，如果您不使用 sprite，有一个可能的解决方法:

如何在 IE 中设置背景尺寸?>

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图像/标志.gif',sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图像/标志.gif',sizingMethod='scale')";

<块引用>

然而，这会缩放整个图像以适应分配的区域.所以如果您使用精灵，这可能会导致问题.

注意
过滤器有缺陷，分配区域内的任何链接都不再可点击.

I've tried to add background size to IE but it's not working at all:

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS:

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

What's wrong with the filter?

解决方案

As posted by 'Dan' in a similar thread, there is a possible fix if you're not using a sprite:

How do I make background-size work in IE?

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

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

However, this scales the entire image to fit in the allocated area. So if your using a sprite, this may cause issues.

Caution
The filter has a flaw, any links inside the allocated area are no longer clickable.

这篇关于IE 8:背景尺寸修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！