CSS：填充问题。需要帮助，请

我遇到在Chrome中一个奇怪的CSS问题的间距（但不是在Firefox和/或IE）CSS：填充问题。需要帮助，请

My site is here.

的“房地产搜索”之间的垂直间距在Firefox（ H2标签）以及“旧金山，CA”（＃城市字段输入标签）的表单输入字段是完美的，但在Chrome中，Chrome会施加比期望更多/更多的垂直间距。

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

enter image description here

任何想法，为什么Chrome是比Firefox & IE应用更间距。

以及如何解决此问题。

在此先感谢

UPDATE

我还使用了“重置样式表”在所有浏览器规范H2间距等，可我的链接的HTML文档中找到上面还仍然遇到这个问题。

来源

2010-09-13 JasonTT

什么是Chrome的“检测元素”，特别是其“度量标准”选项卡？ – 2010-09-13 17:13:48

@Pekka，它显示margin-bottom和padding-bottom都是0。 – JasonTT 2010-09-13 17:27:22

我在想，行高是罪魁祸首。尝试将h2的行高设置为13至15像素左右。默认情况下它被设置为正常。根据W3C，line-height：normal“告诉用户代理根据元素的字体将使用的值设置为”合理的“值。” Firefox和Chrome可以设置不同的“合理”值，因为它们建立在完全不同的渲染引擎上。

来源

2010-09-13 17:36:26

使用重置样式表。

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

来源

2010-09-13 17:13:23 Robusto

我已经使用了一个重置样式表，如我的CSS – JasonTT 2010-09-13 17:14:20

（甚至使用重置样式表和我一样，我仍然遇到这些问题）的顶部看到 – JasonTT 2010-09-13 17:24:02

根据Web Inspector，在Chrome中，您的输入标记具有2px的顶部和底部边距。但是，Firebug在Firefox中显示的这个输入没有余量。使用在你的CSS如下：

#city-field {margin:0}

编辑：因为输入设置为显示额外的间距所引起：inline-block的。如果将其更改为显示：block，则会注意到该空间消失。尝试使用浮动和显示：块来取代内联内容。

来源

2010-09-13 17:14:39

我刚更新了上面的实时代码以使用您拥有的代码，它仍然没有帮助。 – JasonTT 2010-09-13 17:16:24

@JasonTT好凉快。我想，我已经用正确的问题更新了我的答案。 – 2010-09-13 17:30:48

如果我做＃city-field {display：block;}，那实际上消除了额外的间距问题;然而，然后将我的提交按钮推到城市字段输入字段下方的换行符。任何想法如何我可以保持提交按钮在同一行作为城市领域的输入，同时也消除了时髦的额外间距？ – JasonTT 2010-09-13 17:37:23

尝试设置height的正确性#city-field，比方说，在20px。

however。

来源

2010-09-13 17:29:10 achairapart

CSS：填充问题。需要帮助，请

回答

相关问题