IE 8: background-size fix [duplicate]

问题:

This question already has an answer here:

• How do I make background-size work in IE? 9 answers

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?

回答1:

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.

回答2:

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.

Solving your problem could be as simple as:

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

回答3:

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

回答4:

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

background: no-repeat center center fixed\\0/; /* IE8 HACK */

This has solved the frozen links problem for me.

回答5:

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:

//IE8.0 Hack!
@media \\0screen {
    .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;
}

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.