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

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

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

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

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

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

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

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

Border height changes pixel size when zoomed in

html

css

internet-explorer

google-chrome

border