当我创建一些代码时，我注意到了一些奇怪的事情。下载按钮触及左墙的末端，没有间隙(500% 缩放)。但是当我将缩放比例从 500% 降低到 250% 时，会出现一 block 背景(绿色)。观看我展示它的视频。以下是视频中的源代码。这是浏览器渲染错误还是我的代码有问题？
- Windows 10、10.0.18362、64 位
- 谷歌浏览器，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>
最佳答案
根据我的经验，这种事情是一种渲染“怪癖”，而不是“错误”本身。当您更改文档的缩放级别时，您是在要求浏览器将“1px”边框缩放到不同的像素宽度。有时这不等于像素的整数倍，因此浏览器需要做一些事情来解决这个问题。这可能是抗锯齿、将宽度四舍五入到最近的像素等。只要屏幕上的像素不是整数，就需要发生这种事情。这是在高缩放级别发生的事情之一，在大多数情况下，这不是一个大到需要担心的问题。
如果这对您来说是一个问题，您可以尝试做一些事情来尽量减少影响，例如:
- 使用非像素测量
border: 0.1rem solid #CCC - 调整背景的绘制方式:例如，在按钮之间添加间隔元素，并为它们设置背景颜色，使包含元素的背景颜色与其边框颜色相同。
- 试验小边距、变换或位置调整(0.5 像素 - 1 像素)以将元素略微移到边框上方。
这些都是诱使浏览器渲染器执行更适合您特定情况的事情的间接方法，我不确定其中任何一种是否真的有效。它们也可能在其他操作系统和浏览器中产生不良副作用。
TL:DR - 这是浏览器的问题，除非你真的需要，否则不要担心它!
关于html - 谷歌浏览器 - 放大/缩小时呈现差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57000175/