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

【问题标题】：CSS: weird tiling bug in Internet Explorer (any version)CSS：Internet Explorer 中奇怪的平铺错误（任何版本）
【发布时间】：2015-04-05 13:27:07
【问题描述】：

所以，我有一个相当大的覆盖层，我需要平铺，在我使用 Internet Explorer 之前，一切都按预期工作。在 Internet Explorer 上，当它水平“平铺”时，我得到了这些不属于原始文档的奇怪行。

有问题的 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

【问题讨论】：

天啊，wtf 是怎么回事？你可以尝试设置 background-position: 0 0 吗？
background-position 位正是为了让错误出现在 JSFiddle 的 iframe 中。改变它不会改变任何东西。
好的，如果奇怪的 IE 出现在 jsFiddle 上，我会说将您的代码保存到 html 文件并直接加载，然后看看。
它实际上显示在我正在开发的这个网站上。我只是提取了相关的标记和样式作为这里的示例。 :)
好吧，看起来问题与我上面的代码无关。我相信您还需要在您正在处理的实际页面上查看其他内容。

标签： html css internet-explorer png

【解决方案1】：

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

【讨论】：