gpt4 book ai didi

html - 为什么 2px 边框在 Firefox 和 Chrome 中渲染得比 2px 高度高?

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:18 28 4
gpt4 key购买 nike

我正在尝试以两种不同的方式创建一条线。一个是带有高度为 2px 和背景(红色)的 div。另一个是带有 2px 顶部边框(蓝色)的 div。这是测试代码:

.line {
display: inline-block;
vertical-align: top;
width: 50px;
}

.height-line {
height: 2px;
background: red;
}

.border-line {
border-top: 2px solid blue;
}
<div class="line height-line"></div>
<div class="line border-line"></div>

这些应该看起来是一样的,但是在 Chrome 中,您可以看到左边的 div 看起来比右边的 div 厚 1px。在 Firefox 中,当你慢慢改变浏览器窗口的高度时,你可以看到高度在 3px 和 2px 之间波动(你实际上需要查看 equivalent jsfiddle here 才能在 Firefox 中看到这种行为 - 我认为 b/c of显示嵌入 stackoverflow 片段的方式不会发生)。

注意:我的缩放比例正确设置为 100%,并且我已经在其他开发人员的浏览器中验证了相同的行为。我在 Windows 7 上,使用 Chrome 版本 57.0.2987.133。这是一个屏幕截图:

enter image description here

这是怎么回事?

最佳答案

这可能是浏览器错误,受 Windows 显示比例因子的影响。默认显示比例因子为 125%。打开资源管理器窗口并转到“控制面板\所有控制面板项\显示”,然后将显示更改为“较小 - 100%”,然后重新启动计算机:

enter image description here

问题应该消失了。

关于html - 为什么 2px 边框在 Firefox 和 Chrome 中渲染得比 2px 高度高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43208961/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com