CSS：填充问题。需要帮助请
我在 Chrome 中遇到了奇怪的 CSS 间距问题（但在 Firefox 和/或 IE 中没有）
Firefox 中“房地产搜索”（H2 标记）与“加利福尼亚州旧金山市”表单输入字段之间的垂直间距”（#city-field 输入标签）很完美，但在 Chrome 中，Chrome 应用了比预期更多/额外的垂直间距。
为了提供帮助，我附上了一张屏幕截图。红线代表 Chrome 添加但 Firefox/IE 没有添加的额外间距。
任何关于 Chrome 比 Firefox 和 Firefox 应用更多间距的想法IE。
以及如何解决这个问题。
预先感谢
更新
我还使用“重置样式表”来标准化所有浏览器的 H2 间距等。它可以在我上面链接的 HTML 文档中找到，但仍然遇到此问题。
I'm experiencing a strange CSS spacing issue in Chrome (but not in Firefox and/or IE)
The vertical spacing in Firefox between the "Real Estate Search" (H2 tag) and the form input field for "San Francisco, CA" (#city-field input tag) is perfect, but in Chrome, Chrome is applying more/extra vertical spacing than desired.
To help, I've attached a screenshot. The redline represent the extra spacing that Chrome is adding that Firefox/IE are not.
Any ideas why Chrome is apply more spacing than Firefox & IE.
And how to fix this issue.
Thanks in advance
UPDATE
I'm also using a "reset stylesheet" to standardize across all browsers the H2 spacing, etc. It can be found in my linked HTML document above yet still am experiencing this issue.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用重置样式表。
不同的浏览器以不同的方式解释 H1、H2、UL、LI 等标签的 CSS 规则。其中包括填充和默认字体大小。重置样式表会采用所有这些并删除默认值，以便您可以在需要时替换自己的值。
Use a reset stylesheet.
Different browsers interpret CSS rules for tags like H1, H2, UL, LI, etc. in different ways. These include padding and default font size. A reset stylesheet takes all those and removes the defaults so that you may substitute your own values when you so desire.
根据 Web Inspector 的说法，在 Chrome 中，您的输入标签的顶部和底部边距为 2px。然而，Firebug 在 Firefox 中对同样的输入没有显示余量。在 CSS 中使用以下内容：
编辑： 由于输入设置为 display:inline-block，因此导致了额外的间距。如果将其更改为 display:block，您会发现空间消失了。尝试使用 float 和 display:block 来内联内容。
According to Web Inspector, in Chrome, your input tag has a 2px top and bottom margin. However, Firebug shows no margin for this same input, in Firefox. Use the following in your CSS:
Edit: The extra spacing is being caused because the input is set to display:inline-block. If you change it to display:block, you will notice the space disappears. Try using floats and display:block to get the content inline instead.
我认为行高是罪魁祸首。尝试将 h2 的行高设置为 13 到 15 像素左右。默认情况下它设置为正常。根据 W3C，line-height: 正常 "告诉用户代理根据元素的字体将使用值设置为“合理”值。” Firefox 和 Chrome 可能会设置不同的“合理”值，因为它们是基于完全不同的渲染引擎构建的。
I'm thinking that the line-height is the culprit. Try setting the line height of the h2 to somewhere around 13 to 15 pixels. By default it is set to normal. According to W3C, line-height: normal "Tells user agents to set the used value to a "reasonable" value based on the font of the element." Firefox and Chrome could be setting different "reasonable" values since they are built on entirely different rendering engines.