html – CSS：Internet Explorer中的奇怪的平铺错误(任何版本)

2023年8月16日 189次阅读

所以,我有这个相当大的覆盖,我需要平铺,一切都按预期工作,直到我到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

最佳答案 绝对是一个IE漏洞.半答案发现
here.基本上,在Windows 8(IE 10/11)上具有alpha和某些宽高比的图像将重现这一点.切换到1：1宽高比图像(在这种情况下)将避免平铺错误.不是很好的解决方案,因为你必须修改你的图像,但如果你可以修改图像尺寸 – 它的工作原理.

点赞