Question

我在Chrome中遇到奇怪的CSS间距问题（但在Firefox和/或IE中没有）

Firefox中“不动产搜索”（H2标签）与“旧金山，加利福尼亚州”（＃city-field）的表单输入字段之间的垂直间距输入标签是完美的，但在Chrome中，Chrome正在应用比所需更多/更多的垂直间距。

为了提供帮助，我附上了截图。红线表示Chrome添加的额外间距，而Firefox / IE则没有。

enter image description here

任何想法为什么Chrome应用的距离比Firefox＆amp; IE。

如何解决这个问题。

提前致谢

更新

我还使用“重置样式表”来标准化所有浏览器的H2间距等。可以在我上面的链接HTML文档中找到但仍然遇到此问题。

Answer 1

使用重置样式表。

不同的浏览器以不同的方式解释H1，H2，UL，LI等标签的CSS规则。这些包括填充和默认字体大小。重置样式表将获取所有这些并删除默认值，以便您可以在需要时替换自己的值。

Answer 2

根据Web Inspector，在Chrome中，您的输入标记的上下边距为2px。但是，Firebug在Firefox中没有显示相同输入的余量。在CSS中使用以下内容：

#city-field {margin:0}

编辑：由于输入设置为display：inline-block，因此引起了额外的间距。如果将其更改为display：block，您会注意到空格消失。尝试使用浮动并显示：阻止以内联方式获取内容。

Answer 3

尝试设置height #city-field的适当性，假设为20px。

Answer 4

我认为线高是罪魁祸首。尝试将h2的行高设置为大约13到15像素。默认情况下，它设置为正常。根据{{3}}，line-height：normal“告诉用户代理根据元素的字体将使用的值设置为”合理“值。” Firefox和Chrome可能会设置不同的“合理”值，因为它们构建在完全不同的渲染引擎上。