Html 谷歌浏览器-放大/缩小时的渲染差异

当我创建一些代码时，我注意到一些奇怪的事情。下载按钮接触到左墙的末端，没有500%缩放的间隙。但当我将缩放比例从500%降低到250%时，一块背景显示为绿色。观看我播放的视频。下面是视频的源代码。这是浏览器渲染错误还是我的代码有错误

Windows 10，10.0.18362，64位 谷歌浏览器，75.0.3770.100，64位 视频：

指数 html，正文{页边距：0；边框：0；填充：0；字体系列：“蒙特塞拉特”，无衬线；字体大小：1em；行高：1.2；颜色：222；} html{background:bbb；} 正文{宽度：1000px；边距：0自动；背景：fff；} a{文本装饰：无；} .范德林报告{ 溢出：隐藏； 填充物：5px； } .modeleriputreportdiv{ 浮动：对； } .modelerInputReportDiv span{ 显示：内联块； } .modelerInputReportDiv按钮{ 垂直对齐：中间对齐； 光标：指针； 字体大小：粗体； 填充：8px； 颜色：fff； 边框：1px实心ccc； 背景：0066cc； 左边距：5px； } .modelerInputReportDiv按钮：悬停{ 边框：1px实心1B273F； } .modelerInputReportDiv按钮：激活{ 背景：cc7600； 边框：1px实心402400； 盒影：嵌入0 10px 2px 402400； } 生成以解锁- 报告： 打印 下载

---

根据我的经验，这类事情是一个渲染“怪癖”，而不是一个“错误”本身。更改文档的缩放级别时，要求浏览器将“1px”边框缩放到不同的像素宽度。有时，这并不等于像素的整数，因此浏览器需要做一些事情来说明这一点。这可能是抗锯齿，将宽度舍入到最近的像素，等等。每当屏幕上有不是整数像素的东西时，就需要发生这种事情。这是在高缩放级别时发生的事情之一，在大多数情况下，这并不是一个大到可以担心的问题

如果您的情况存在问题，您可以尝试采取措施将影响降至最低，例如：

使用非像素测量边界：0.1rem solid CCC 调整绘制背景的方式：例如，在按钮之间包含间隔元素，并为其添加背景颜色，使包含元素的背景与其边框颜色相同。 尝试使用0.5px-1px的小边距、变换或位置调整，将元素轻轻推过边界。 这些都是诱使浏览器的渲染器为您的特定情况做更好的事情的间接方法，我不确定这些方法中的任何一种是否真的能起作用。它们可能在其他操作系统和浏览器中也有不希望的副作用

---

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

这是显示：内联块；问题是因为内联块使用了一些间距 使用float:left而不是display:inline块

使用这个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;
}

---

你说得对，我之前没想过。这对我来说并不重要，它让我好奇为什么会发生这种事。