Chrome中的边框宽度不一致

Question

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

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

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

这有一个很好的解决方案吗？

我将在Surface Pro 3上添加它。它可能与Windows中的缩放有关。

Answer 1

这将解决您的问题：

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