Internet Explorer 中的大型重复背景图像

Question

我正在尝试将视口容器中的超大图像呈现为具有重复样式的背景图像。下面的代码适用于 Chrome 和 Firefox，但是在 Internet Explorer 中查看它时（在多台计算机上的 9 和 11 中观察到），我得到了某种奇怪的图像撕裂。有人有解决方案吗？

HTML:

<div class="map-layer"></div>

CSS:

.map-layer {
width:4468px;
height:2016px;
background: #000000 url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') 1px -1px repeat-x;
}

http://jsfiddle.net/75r8hgdg/1/

注意：当背景x位置设置为0时，撕裂效果消失，但违背了从指定(x,y)开始的目的。

Answer 1

看起来正 x 位置导致撕裂（非常奇怪，很可能是错误）

试试这个：

<style>
    .map {
        width:4468px;
        height:2015px;      
        padding-left: 1px;
    }
    .map-layer {
        width:4468px;
        height:2016px;
        background: url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') repeat-x #000000;
        background-position: 0 -1px;
    }
</style>

<div class="map">
    <div class="map-layer">
    </div>
</div>

Answer 2

经过进一步搜索，我最终使用的解决方案被引用为另一个问题 found here 中的解决方法。通过使透明图像的高度和宽度匹配，伪像消失了。

Internet Explorer 中的大型重复背景图像

Large repeating background image in Internet Explorer

html

css

internet-explorer

png