html - 具有重复背景的 Div 在 IE/Edge 中无法正确呈现

Question

我有这个 div :

<div id="trees"></div>

使用此 css 格式化:

#trees {
  width: 100%;
  position: absolute;
  top: 37%;
  height: 40%;
  background: url("/img/Tree.png") repeat-x;
  background-size: auto 100%;
}

它在我测试的所有浏览器中都运行良好，结果如下:

除了在 IE/Edge 中，它看起来像这样:

有颜色错误的树:

最奇怪的是，这个问题不会影响任何其他具有类似配置背景图像(如火车轨道或山脉)的 div...我对此进行了很多搜索，但似乎无法在任何地方找到答案。我还尝试将图像从 png 转换为 gif，结果相同。我将如何解决此问题以实现 IE/Edge 兼容性？

这是在 Edge 中重现问题的代码笔:https://codepen.io/darthmooguy/pen/gmNWwg

Answer 1

我和你遇到了同样的问题，虽然这不能解决问题的原因，但我发现在图像的边缘添加透明填充并增加背景大小是许多可用的解决方法例。

https://codepen.io/anon/pen/BRwxbR添加以下缩放我的背景，因此将其设置为适当的级别。

background-size: auto 250%;
background-position: center center;

请忽略颜色变化 - 我也想知道是否特定颜色根据您最初的问题触发了它，但它没有。

我可能会进一步研究这个问题，因为我这里的解决方法实际上并没有解决我的问题。 :)