CSS IE 8:背景大小修复

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4885145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:38:07  来源:igfitidea点击:

IE 8: background-size fix

cssxhtmlfilterwidthbackground-image

提问by Thomas

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

我试图为 IE 添加背景大小,但它根本不起作用:

HTML

HTML

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

CSS:

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?

过滤器有什么问题?

回答by Sotkra

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

正如“Dan”在一个类似的帖子中发布的那样,如果您不使用精灵,则有一个可能的解决方法:

How do I make background-size work in IE?

如何使背景大小在 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.

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

回答by Louis-Rémi

I created jquery.backgroundSize.js: a 1.5K jquery plugin that can be used as a IE8 fallback for "cover" and "contain" values. Have a look at the demo.

我创建了jquery.backgroundSize.js:一个 1.5K 的 jquery 插件,可以用作“cover”和“contain”值的 IE8 后备。看看演示

Solving your problem could be as simple as:

解决您的问题可能很简单:

$("h2#news").css({backgroundSize: "cover"});

回答by Muhammad Ahsan

Also i have found another useful link. It is a background hack used like this

我也找到了另一个有用的链接。这是一个像这样使用的背景黑客

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }

https://github.com/louisremi/background-size-polyfill

https://github.com/louisremi/background-size-polyfill

回答by user890332

I use the filter solution above, for ie8. However.. In order to solve the freezing links problem , do also the following:

我使用上面的过滤器解决方案,用于 ie8。但是..为了解决冻结链接问题,还请执行以下操作:

background: no-repeat center center fixed
//IE8.0 Hack!
@media ##代码##screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}
/; /* IE8 HACK */

This has solved the frozen links problem for me.

这为我解决了冻结链接问题。

回答by Custodio

As pointed by @RSK IE8 doesn't support background-size. To figure out a way to deal with this, I used some IE specific hacks as showed here:

正如@RSK IE8 所指出的,不支持背景尺寸。为了找出解决这个问题的方法,我使用了一些特定于 IE 的技巧,如下所示:

##代码##

Using this I was able to change my logo image to a ugly resided picture. But the final result is fine. I suggest u try something like this.

使用它,我能够将我的徽标图像更改为丑陋的驻留图片。但是最后的结果是好的。我建议你尝试这样的事情。