html - Firefox 中宽度和边距的不同行为

Question

我在 960px 容器中有两个 float 元素

我测试了不同尺寸的这些元素，在 chrome 中一切正常，但在 Firefox 中，元素在某些情况下不会保持在一起。

通过:

(宽度:479.04px * 2)+ 左边距:0.48px + 右边距:0.48px = 960px

(宽度:477.12px * 2)+ margin-left:1.44px + margin-right:1.44px = 960px

http://lukepeters.me/csspad/X5EKgU595 (在 Firefox 中查看)

失败:

(宽度:478.08px * 2)+ 左边距:0.96px + 右边距:0.96px = 960px

(宽度:473.28px * 2)+ 左边距:3.36px + 右边距:3.36px = 960px

(宽度:468.48px * 2)+ 左边距:5.76px + 右边距:5.76px = 960px

http://lukepeters.me/csspad/eWPNEF594 (在 Firefox 中查看)

有什么建议吗？

Answer 1

浏览器通常会为元素添加默认边距或填充。为了安全起见，请始终在 CSS 文件的顶部使用重置 CSS:

*{
  margin: 0;
  padding: 0;
}