CSS：Internet Explorer（任何版本）中奇怪的平铺错误

Question

所以，我得到了这个相当大的覆盖图，我需要对其进行平铺，并且一切正常，直到我进入 Internet Explorer。在 Internet Explorer 上 "tiles" 水平显示时，我得到这些不属于原始文档的奇怪行。

冒犯HTML和CSS：

<html>
    <head>
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            margin: 0;
            width: 100%; 
            height: 100%;
            position: relative;
            background-color: #CCCCEF;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://dl.dropboxusercontent.com/u/177486/grit.tiny.png');
            background-position: -900px 0%;
            z-index: 1;
        }
    </head>
    <body>
        <div class="overlay"></div>
    </body>
<html>

这是一张展示其功能的图片：

Example on JSFiddle

Answer 1

绝对是 IE 错误。找到半答案 here。基本上，在 Windows 8+ (IE 10/11) 上具有 alpha 和特定纵横比的图像将重现此情况。切换到 1:1 宽高比图像（在这种情况下）将避免平铺错误。这不是一个很好的解决方案，因为您必须修改图像，但如果您可以修改图像尺寸 - 它会起作用。

CSS：Internet Explorer（任何版本）中奇怪的平铺错误

CSS: weird tiling bug in Internet Explorer (any version)

html

css

internet-explorer

png