Chrome/Safari和Firefox之间奇怪的毛利差异

Question

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

我在我的样式表中有一个css重置（不知道这是否与此有关），我无法弄清楚是什么导致了这一点，以及如何让网站看起来像它在查看时的样子在Chrome

Answer 1

历史后的差距是由于：

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

你也可以移动元素的大顶和底部边缘内：

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

这可能与补救#content的孩子divs填充孩子divs自己。只要它们都包含在这些子div中，任何东西都可以工作。

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

Answer 2

如果你想避免历史之后的差距，你会想在historyWide中使用填充而不是margin;边缘拉动的元素，而填充使他们更大

关于解剖发生了什么是你正在使用属性“顶部”修改#styles，这将移动元素，但父母将只保留原始空间的元件。如果必须保持元素之间的关系，那么使用边距和填充比使用“顶部”更好。

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