Question

在针对不同分辨率测试某些样式时，我遇到了Google Chrome上某些块元素的问题。

http://s3.postimg.org/n89fitzhv/chrome_bug.png

正如您在图像中看到的那样，元素之间似乎存在边框渲染。这是使用的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .test ul li {
            list-style:none;
            display:inline-block;
            width:200px;
            background-color:#1d5b7f;
            float:left;
        }
    </style>
</head>
<body>
    <div id="container">
        <nav class="test">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>            
            </ul>
        </nav>
    </div>
</body>
</html>

我发现当Windows 7 DPI缩放不是100％的倍数时，Google Chrome和Google Chrome Canary会出现此问题。我使用的是3840x2160分辨率显示器。如果缩放比例不是100％的倍数，当我将分辨率更改为1920x1080时，问题就显而易见

我没有在Opera，Safari，Firefox或IE上发现此问题。

我想找到一个解决方法。有没有人有任何与此有关的想法或信息。感谢。

Answer 1

尝试使用此样式进行修复：

-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;

Chrome块元素与Windows DPI缩放具有奇怪的边界

1 个答案: