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

經過進一步搜索后，我在這里找到的另一個問題中的解決方案被引用為我的解決方案。 通過使透明圖像的高度和寬度匹配，偽影就消失了。