Chrome中的边框宽度不一致答案

【问题标题】：Inconsistent border width in ChromeChrome中的边框宽度不一致
【发布时间】：2015-01-04 17:47:36
【问题描述】：

在渲染具有 1 像素宽边框的框时，我遇到了不一致的边框宽度。这显然是由于浏览器缩放（我在 2160 x 1440 显示器上）。虽然我意识到“像素不是像素”的问题（由于缩放），但我仍然认为边框的宽度应该在框的所有边都相同，不是吗？

这个问题出现在 Chrome 和 IE 上，但 Firefox 和 Opera 都能完美处理。如您所见，左右边框比上下边框宽一点。

这是我的代码：

div {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

&lt;div&gt;&lt;/div&gt;

有什么好的解决办法吗？

我会补充一点，我使用的是 Surface Pro 3。这可能与 Windows 中的缩放有关。

【问题讨论】：

我无法重现您的问题。不过，这听起来更像是一个 Chrome 错误。
我也无法复制，投票结束。
@MightyPork 为什么？你是在暗示我在编造这个吗？
不，只是这不是我们能够解决的问题。如果它是 chrome 中的错误，请将其报告给 Chromium bugtracker。此外，这不是我们可以重现的错误，因此它可能特定于您的设置。
你能检查一下你的浏览器没有缩放吗？

【解决方案1】：

正如您所说，这与浏览器缩放有关。我经常在 Chrome 中看到这种情况，Windows 10 的显示缩放设置为 150%，这是 UHD 显示器的默认设置之一。

我不确定 Opera 和 Safari 的兼容性，但这对我来说适用于 Firefox、Edge 和 Chrome：

border-width:0.1px;

【讨论】：

我有时会遇到这个问题，特别是因为我的系统具有 125% 的显示缩放比例，这是 Windows 10 上 1440p 显示器的推荐缩放比例。使用小于像素的值有助于使其精确到像素甚至发布-缩放。解决这个问题的正确方法是强制容器与显示器的物理像素边界对齐。

【解决方案2】：

这将解决您的问题：

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

【讨论】：