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

根据我的经验，这种事情本身就是渲染的“怪癖”，而不是“ bug”。更改文档的缩放级别时，您在要求浏览器将“ 1px”边框缩放为其他像素宽。有时，这不等于像素总数，因此浏览器需要执行某事来解决这一问题。某些事情可能是抗锯齿，将宽度舍入到最接近的像素等。只要屏幕上的像素不是整数，就需要发生这种事情。这是在高缩放级别上发生的事情之一，在大多数情况下，这并不是一个要担心的大问题。

如果这是您的问题，则可以尝试采取措施以最大程度地减少影响，例如：

使用非像素测量border: 0.1rem solid #CCC
调整背景的绘制方式：例如，在按钮之间包括间隔元素，并为它们加上背景颜色，使包含元素的背景与其边框的颜色相同。
以较小的边距，变换或位置调整（0.5像素-1像素）进行实验，以使元素略微超出边界。

这些都是间接的方法，可以欺骗浏览器的渲染器以使其更适合您的特定情况，并且我不确定这些方法中的任何一种是否会真正起作用。它们也可能在其他操作系统和浏览器中产生不良影响。

TL：DR-它是浏览器，除非真正需要，不要担心！

Answer 2

这是display：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-放大/缩小时呈现差异

2 个答案: