chrome/safari 和 firefox 之间的 CSS 定位差异答案

【问题标题】：CSS positioning discrepancy between chrome/safari and firefoxchrome/safari 和 firefox 之间的 CSS 定位差异
【发布时间】：2013-07-30 15:17:28
【问题描述】：

好的，所以我已经尝试了很多方法来解决这个问题，但我一定遗漏了一些东西。我对此并不陌生，并且在使用 firebug 时正在学习，这使我很难解决这个特殊问题。我的网站（正在开发中）在 Firefox 中运行良好，但在 chrome 和 safari 中的搜索栏和类别栏之间存在垂直差距。见这里：

http://how2garage.com/

您可以在 Chrome 中看到红色搜索栏和黑色类别栏之间的差距。起初我以为是“博客描述”，但我将其设置为不显示，但它没有帮助。我还尝试切换位置定义，并且无法在 Chrome 中解决此问题，而不会在 Firefox 中将其弄乱。任何帮助表示赞赏！

【问题讨论】：

标签： css positioning

【解决方案1】：

你有

#header { 
  padding:0 0 20px 0;
}

在你的 css..（Style.css，第 54 行）

您应该删除填充。

【讨论】：

哇，这么简单吧？谢谢，这解决了它。你介意解释一下为什么 Safari 和 Chrome 使用了这个填充，而 Firefox 没有吗？我什至没有考虑检查父主题 css，因为我认为如果它是父主题中的某些东西，所有三个浏览器都会出现问题。再次感谢。

【解决方案2】：

正如@Tim 所说，“#header”样式有 20px 的填充，并且在您的 css 文件底部有：

#header, x:-moz-any-link, x:default {
    padding: 0;
}

这就是为什么在 Firefox 中您看不到差距。

【讨论】：