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

Question

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

我的样式表中有一个 CSS 重置（不确定这是否与此有关），我无法弄清楚是什么原因造成的，以及如何让网站看起来像在 Chrome 中查看时的样子

score 1 · Accepted Answer

如果你想避免 History 之后的差距，你会想在 historyWide 中使用填充而不是边距；边距拉开元素，而填充使它们更大

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

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

score 1 · Accepted Answer

历史之后的差距是由于：

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

可以通过以下方式进行补救：

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

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

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

2 回答 2