Question

我已经找到了大量有关此问题的主题，但似乎没有任何结果。

我的网站由一个主div组成，所有内容占屏幕宽度的80％。具有背景的div粘贴在div的每一侧，具有绝对位置，如下所示：

现在，side divs应用了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/

所以，这是我网站的背景。在网站的每一侧都有一个“横幅”，但在IE中发生的是，这些横幅在向下滚动后停止重复（似乎那些横幅占据了屏幕的高度，而不是父母（这是100％的）在JSFiddle中这当然有效，因为这是正常的行为。假设页面包装器的高度总共为4000px，横幅只占据屏幕高度从顶部到底部的高度。我打开一个控制台，然后推开控制台，横幅也被推高......

Answer 1

好吧，不知怎的，我工作的框架（Magento 2）就是问题所在。我不知道这将是一个Magento问题，直到我看到Magento添加了一个 .ie10和.ie11使用GenStage包装内容。感谢使用height: 100%的@Suresh Ponnukalai，我能够解决问题。

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

背景重复在Internet Explorer

1 个答案: