放大时边框高度会改变像素大小

Question

当您放大页面时，我页面上元素周围边框的高度会改变高度。边框定义为 1px。我在 Chrome 和 IE 上看到了调整大小的问题，但在 Firefox 上没有。这个问题的根源是什么？相关的css如下。

Chrome 上显示的调整大小问题

.highlightHeader{
    border-bottom-color: rgb(184, 34, 46);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: rgb(184, 34, 46);
    border-top-style: solid;
    border-top-width: 1px;
}

Answer 1

放大/缩小（使用 Ctrl+/Ctrl-）不是 HTML 规范的一部分。这是浏览器制造商开发的东西，让用户可以放大/缩小内容，以提高页面布局的可读性或鸟瞰图，同时放弃像素完美的细节。

在执行此操作时，内容大小会发生变化，并且每个浏览器都会尽最大努力保持原始方面与原始方面接近，但进行了缩放。每个人如何做都无法以任何方式控制。这是网页/应用程序无法访问的级别。

当客户告诉您他们希望缩放页面与未缩放页面的设计相匹配时，向他们展示门并说：

“请让我带你看看门。密切注意它的外观尺寸。你会注意到，当你靠近它时，它的外观尺寸会增加。你要求我在靠近它时保持外观尺寸不变。现在，请决定是否要使用它。”

如果您想为您的应用程序/页面创建自定义缩放机制，这是完全可能的，您可以指定要更改哪些元素/属性以及哪些保持不变。但这不会阻止人们使用本机浏览器缩放控件（如上所述），并且您无法控制浏览器在缩放页面时如何呈现页面内容。它是从文档（页面）外部完成的，这就是您的控制结束的地方。