背景重复在 Internet Explorer 中不起作用

Question

我找到了很多关于此的主题，但似乎没有任何结果。

我的网站由一个主要 div 组成，所有内容占屏幕宽度的 80%。在div的两边各贴一个有背景的div，有绝对位置，像这样：

Example of what I mean

现在，侧面 div 应用了 background-repeat: repeat-y 样式。 html 的高度是 100%，我想要的在所有浏览器中都有效，除了 INTERNET EXPLORER（即使在 Edge 中，但我知道它处理 HTML 和 CSS 的方式与IE）（沮丧，抱歉）。

代码：

.bg-left {
    background: transparent url("../images/background/bg_left.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    left: -100px;
}

.bg-right {
    background: transparent url("../images/background/bg_right.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    right: -100px;
}

有没有人可以帮助我？

提前致谢

-- JSFIDDLE --

https://jsfiddle.net/fwah7gr6/12/

所以，这是我网站的上下文。网站的每一侧都有一个 'banners'，但在 IE 中发生的情况是，在您向下滚动后，这些横幅会停止重复（看起来这些横幅占据了屏幕的高度，而不是父级（即 100 % in height）。在 JSFiddle 中，这当然有效，因为那是正常行为。假设页面包装器的总高度为 4000px，横幅仅采用从屏幕高度的顶部到底部的高度. 当我打开控制台并向上推控制台时，横幅也会被向上推...

Answer 1

好吧，问题出在我工作的框架 (Magento 2) 上。我不知道这会是一个 Magento 问题，直到我看到 Magento 添加了一个 .ie10 和 .ie11 用 height: 100% 包装内容。感谢使用 height: auto 的@Suresh Ponnukalai，我能够解决问题。

我没有提及我正在使用 Magento 2 的借口，但我认为这纯粹是一个 HTML/CSS + IE 问题。

背景重复在 Internet Explorer 中不起作用

Background-repeat not working in internet explorer

html

css

internet-explorer

background-repeat