2017-04-07 84 views
3

我有这个div:股利反复的背景不会呈现proprely在IE /边缘

<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%; 
} 

它可以在所有我测试浏览器细末,用这样的结果:

Normal trees

除IE/EDGE,它看起来LIK E本:

树与颜色毛刺:

最奇怪的是,这个问题不会影响任何其他的div类似配置的背景图像像火车轨道或山脉...我有一个搜索对此很多,似乎无法在任何地方找到答案。我也尝试将图像从PNG转换为GIF,并得到了相同的结果。我如何解决这个IE /边缘兼容性?

这里是一个codepen再现边缘的问题:从Irfanview的保存https://codepen.io/darthmooguy/pen/gmNWwg

+0

你能提供一个[mcve]来演示这个问题吗? –

+0

我在codepen上添加了一个例子! –

+0

我认为您需要使用Adobe图像编辑产品从图像中删除Adobe XMP元数据。重命名文件不会。你是否创作过这个图片(https://image.ibb.co/k388T5/Tree.png)?还是来自第三方来源? –

回答

0

我和你有同样的问题,虽然这不能解决问题的原因,但我发现在图像边缘添加透明填充并增加背景大小是一种可用的解决方法。很多情况下。

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

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

请忽略颜色变化 - 我也想知道,如果一个特定的颜色触发,根据您最初的问题,但事实并非如此。

我可能会进一步考虑这一点,因为我的解决方法并不能真正解决我的问题。 :)

+0

它奇妙地工作,谢谢! –

0

这里是树图像(PNG)(保存透明,无压缩)...我不知道是否准许IrfanView,剥去虽然Adobe元数据。

enter image description here

,你可以看到...的颜色和透明度颜色是完全不同的从Adobe创作的源泉。