Chrome 和 Firefox 的文本垂直对齐方式不同答案

【问题标题】：Chrome and Firefox have different vertical alignment for textChrome 和 Firefox 的文本垂直对齐方式不同
【发布时间】：2014-07-15 19:29:43
【问题描述】：

如何实现 div 内的文本在 Firefox 和 Chrome 中具有相同的 padding-top？在 Firefox 中，默认情况下它的 apadding-top 为 3px，而 Chrome 只有 2px。

HTML

<div class="wrap">
    <div class="content">Hello World</div>
</div>

CSS

.wrap{
border: 1px solid;
background: lightblue;
height: 50px;
width: 120px;
font-family: sans-serif;
}

【问题讨论】：

标签： html css

【解决方案1】：

如果你想垂直对齐 div 内的文本。

您的 div 中有 50px 高度。所以只需简单地将line-height:50px; 属性赋予您的班级。如果您增加 div 的高度，那么也增加您的 line-height。

如果您想让文本居中对齐，请添加text-align:center;。

【讨论】：

【解决方案2】：

您只需使用 CSS line-height 属性设置文本的前导。不同的浏览器可能会有不同的默认值。

【讨论】：

比较 FF 和 Chrome，你的解决方案不起作用jsfiddle
请仔细看看我的代码，这不是我做的。我使用了一个像素值，所以线块的高度在浏览器中总是相同的。由于渲染技术或字体变化或使用的格式，浏览器之间的字形渲染总是存在细微差异。
js fiddle -> 即使是像素，也有 1 个像素的差异，如果在小盒子内使用小字体，这看起来很奇怪。似乎没有解决办法。

【解决方案3】：

您使用重置 css 吗？请参阅http://www.cssreset.com/，并进行测试。

【讨论】：

【解决方案4】：

不同的浏览器及其内核在 html 代码中使用不同的默认设置。最简单的解决方案是每次重置 css 代码时使用。该代码必须包含在您的代码之前，并且会重新排列您可能会进一步发现的所有差异。

【讨论】：