书面边框与显示边框

Question

我有一个简单的纯html / css边框问题。

如果我做这样的事情：

#demoDiv {
  border: solid 1px black;
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}

此cssText会将ID为“ demoDiv”的div元素设置为带有黑色边框的绿色框。盒子的高度应该是102像素，宽度应该是102像素，对吧？
但是现在出现了我的问题。...Firefox告诉我，此框的高度和宽度为101.6像素。
唯一有效的边框宽度是“ 0”-其他宽度必须乘以0.8。

Answer 1

这是因为您没有为页面设置box-sizing：border-box。默认情况下，所有Html页面内容框均设置为框大小，这仅表示它会计算从边距框到内容区域框的所有大小。请确保对它有更多了解，因为它将对将来有用。您可以从Mozilla-Mdn了解有关边界框的更多信息。

Answer 2

我在这里找到了解决方案： What could make Firefox render an incorrect border width?
概括起来：Firefox在缩放时呈现边框宽度。
感谢您的响应