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

【问题标题】：Background-repeat not working in internet explorer背景重复在 Internet Explorer 中不起作用
【发布时间】：2018-03-07 15:51:47
【问题描述】：

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

我的网站由一个主 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/

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

【问题讨论】：

你能在 jsfiddle 中重现这种行为吗？
如果问题只是 IE 特定的，这可能吗？
看不到，无法修复。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
我很想展示它，但由于实习特定和我的问题，我无法展示原始网站：“当问题仅是 IE 特定时，这可能吗？”。（在 jsfiddle 或其他东西中）

标签： html css internet-explorer background-repeat

【解决方案1】：

好的，不知何故，我正在使用的框架（Magento 2）是问题所在。我不知道这会是一个 Magento 问题，直到我看到 Magento 添加了一个 .ie10 和 .ie11 使用 height: 100% 包装内容。感谢@Suresh Ponnukalai，它使用了height: auto，我能够解决这个问题。

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

【讨论】：