Chrome 中的边框宽度不一致

Question

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

这个问题发生在 Chrome 和 IE 上，但 Firefox 和 Opera 都完美地处理了它。如您所见，左右边框比​​顶部和右侧边框稍宽。

这是我的代码：

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

<div></div>

有什么好的解决办法吗？

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

Answer 1

这将解决您的问题：

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