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

Question

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

Resizing issue shown on 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 规范的一部分。这是浏览器制造商开发的东西，允许用户放大/缩小内容以提高页面布局的可读性或鸟瞰图，同时放弃像素完美的细节。

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

当客户告诉您他们希望缩放后的页面与未缩放后的页面的设计相匹配时，带他们进门并说:

“请让我带你看看门。密切注意它的表观大小。你会注意到，当你靠近它时，它的表观大小会增加。你要求我保持表观大小不变，而你离它越来越近了。现在，请决定是否要使用它。”

---

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