IE8 背景大小问题

Question

我目前正在构建一个视差网站，它可以在所有浏览器上运行，除了IE8因为使用了background-size而无法正常显示。

我已经尝试了ms filter，想知道是否有其他解决方案。

section {
width: 100%;
position: relative;
overflow-x: hidden;
z-index: 0;

}

.parallax__one {
background: url("../Images/parallex__bg__1.png") 0px 0 no-repeat fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(     src='../Images/parallex__bg__1.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../Images/parallex__bg__1.png', sizingMethod='scale')";
    /* background size */
    -webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%; 

}

- user1970409

---

我发现了一个很棒的网站，叫做Stack Overflow：https://dev59.com/questions/9HA75IYBdhLWcg3w_uiD。 - DavidB

js.background不起作用，因为它使用了一个具有z-index的图像，但由于制作视差效果，它必须在css中设置为背景。 - user1970409

@user1970409 面临同样的问题。你找到任何解决方案了吗？ - Tamara

我最终修复了它，我相信这与宽度有关。 - user1970409

Answer 1

background-size在IE8中不起作用。

你需要使用类似于polyfill的东西。

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

---

自 readme 中的说明：

将 backgroundsize.min.htc 上传到您的网站上，以及发送 IE 所需的 mime-type 的 .htaccess（仅适用于 Apache —— 它已内置于 nginx、node 和 IIS）。

在您的 CSS 中使用 background-size 的任何地方，都要添加对此文件的引用。

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

以这种方式进行样式设置的元素应该具有 position: relative; 或 position: fixed; 和 z-index。如果没有，它们将被赋予 position: relative; 和 z-index: 0;。

- ryanwinchester