Google Chrome - 缩放时的渲染差异 in/out

Question

当我创建一些代码时，我注意到了一些奇怪的事情。下载按钮触及左墙的末端，没有间隙（500% 缩放）。但是当我将缩放比例从 500% 降低到 250% 时，会出现一块背景（绿色）。观看我展示它的视频。以下是视频中的源代码。这是浏览器渲染错误还是我的代码有问题？

Windows 10、10.0.18362、64 位
Google Chrome, 75.0.3770.100, 64 位

视频：https://youtu.be/uwAEixLBUeU

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
    <style>
        html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
        html { background: #bbb; }
        body { width: 1000px; margin: 0 auto; background: #fff; }
        a { text-decoration: none; }

        .modelerInputReport {
            overflow: hidden;
            padding: 5px;
        }

        .modelerInputReportDiv {
            float: right;
        }

        .modelerInputReportDiv span {
            display: inline-block;
        }

        .modelerInputReportDiv button {
            vertical-align: middle;
            cursor: pointer;
            font-weight: bold;
            padding: 8px;
            color: #fff;
            border: 1px solid #ccc;
            background: #0066cc;
            margin-left: 5px;
        }


        .modelerInputReportDiv button:hover {
            border: 1px solid #1B273F;
        }

        .modelerInputReportDiv button:active {
            background: #cc7600;
            border: 1px solid #402400;
            box-shadow: inset 0 0 10px 2px #402400;
        }
    </style>
</head>
<body>
    <div class="modelerInputReport">
        <div class="modelerInputReportDiv">
            <span id="modelerInputReportMsg">(generate to unlock) -</span>
            <span>Report:</span>
            <button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
            <button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
        </div>
    </div>
</body>
</html>

Answer 1

根据我的经验，这种事情是渲染 'quirk'，而不是 'bug' 本身。当您更改文档的缩放级别时，您是在要求浏览器将“1px”边框缩放到不同的像素宽度。有时这不等于完整的像素数，因此浏览器需要做某事来解决这个问题。这可能是 anti-aliasing、将宽度四舍五入到最近的像素等。只要屏幕上的像素不是整数，就需要发生这种事情。这是 high-zoom 级别发生的事情之一，在大多数情况下，这不是一个大到需要担心的问题。

如果你的情况是个问题，你可以尝试做一些事情来尽量减少影响，例如：

使用 non-pixel 测量值 border: 0.1rem solid #CCC
调整背景的绘制方式：例如，在按钮之间添加间隔元素，并为其设置背景颜色，使包含元素的背景颜色与其边框颜色相同。
尝试使用较小的边距、变换或位置调整 (0.5px - 1px) 将元素略微移到边框上方。

这些都是诱使浏览器渲染器执行更适合您特定情况的事情的间接方法，我不确定其中任何一种是否真的有效。它们也可能在其他 OS 和浏览器中产生不良副作用。

TL:DR - 这是浏览器的问题，除非你真的需要，否则不要担心它！

Answer 2

这是display:inline块；由于 inline-block 使用一些间距的问题使用 float: left 而不是 display: inline-block,

使用这个css

.modelerInputReportDiv span {
     float:left;
}
.modelerInputReportDiv button {
     float:left;
     vertical-align: middle;
        cursor: pointer;
        font-weight: bold;
        padding: 8px;
        color: #fff;
        border: 1px solid #ccc;
        background: #0066cc;
        margin-left: 5px;
}

Google Chrome - 缩放时的渲染差异 in/out

Google Chrome - Rendering differences when zooming in/out

html

css

google-chrome

zooming