Chrome/Safari 和 Firefox 之间奇怪的边距差异

Question

最近设计了一个网站（http://willryan.us/typefun01），主要是使用Chrome一边编码一边测试。我最近注意到某些部分的末尾发生了一些奇怪的事情（历史之后的间隙，风格与解剖学的重叠）。

我的样式表中重置了 css（不确定这是否与此有关），并且我无法弄清楚导致此问题的原因，以及如何使网站看起来像在 Chrome 中查看时的样子

Answer 1

历史后的差距是由于：

#historyWide {
    margin: 250px 80px 75px;
}

可以通过以下方法补救：

div#content > div {
    overflow: hidden; /* or auto */
}

您还可以将 #content 的子 div 内元素的较大顶部和底部边距移动到子 div 本身的填充。只要所有内容都包含在这些子 div 中，任何内容都可以工作。

您只是看到浏览器处理不完美布局的不同方式。

Answer 2

如果你想避免历史记录之后的间隙，你需要在historyWide中使用填充而不是边距；边距会拉开元素，而内边距会使元素变大

从解剖学角度来看，发生的情况是您使用属性“top”来修改#styles，这将移动元素，但父级将仅保留元素的原始空间。如果您必须保持元素之间的关系，那么使用边距和填充会比使用“顶部”更好。

最后，我不会像使用 #stylesMono 那样使用边距来定位元素。我认为你可以更好地处理段落以保持垂直位置，并从那里开始在“p”范围内处理浮动、边距和填充。

Answer 3

最好的做法是你的 CSS 总是这样开始：

* {
  margin: 0px;
  padding:0px;
}

它将删除您网站上所有不必要的边距和填充。