奇怪的白色间隙和水平滚动问题答案

【问题标题】：Weird white gaps and horizontal scrolling issue奇怪的白色间隙和水平滚动问题
【发布时间】：2012-11-21 05:42:13
【问题描述】：

我正在处理的设计似乎有问题。我正在使用 kickstart HTML 框架，但有几个问题。

首先，我的页面顶部（徽标、导航栏）和文本之间有很大的空白。

其次，我尝试使用 z-index 将徽标覆盖在导航栏上。但是，它会导致负水平滚动。我试图通过隐藏 overflow-x 来隐藏它，但这似乎不是最好的解决方案。

谢谢，

约翰

【问题讨论】：

【解决方案1】：

在徽标上使用 position: relative 会占用您要引用的空间。

改为使用float:right，或者使用position: absolute;

【讨论】：

【解决方案2】：

白色间隙的问题在于图像。如果禁用position:relative 属性，图像底部将触及第一个标题标签的上边距。一个肮脏的解决方法是在第一个标题上使用margin-top: -200px，或者在徽标图像上使用margin-bottom: -200px。您也可以使用上一个回答者的方法。

至于覆盖导航栏的徽标图像，它在 Chrome 和 IE 9 中都适用。

【讨论】：