webkit vs firefox文本的高度

我有相当大的文本（字体大小28）我试图在固定高度的容器中垂直对齐。webkit vs firefox文本的高度

我这样做的目的只是设置一个边缘顶部，以便它到达正确的位置。但是，在Firefox中，我需要20px的margin-top，而在Safari中，我需要15px（否则它太慢了）。我看到这种差异是因为在Safari中，文本元素比Firefox中高，并且在顶部包含少量的空白（在Firefox中不显示）（在Firefox中，文本元素的顶部恰好是文本开始的时候）。

我试过所有有线高度的显示组合，并且可能会为文本和内容添加宽度/高度。什么都没有

我能做些什么来使这一致？我讨厌使用JS但它似乎是唯一的选择......

来源

2011-10-26 butterywombat

让我们来看看相关的html/css吧！ jsfiddle.net –

跨浏览器CSS正常化，我建议复位 - YUI3有一个好，Twitter的引导是个不错的选择。它基本上将填充和边距设置为0，因此所有浏览器都会表现出来，并且只遵守您的css规则而不是他们自己的默认规则。

对于垂直对齐文本到容器，如果它是一行文本，请使用line-height属性，并将其设置为等于容器的高度。

例如：

CSS：

div { 
    height:300px; 
    width: 400px; 
    line-height: 300px; 
    font-size:28px; 
    background-color:#F0F0F0; 
}

HTML：

<div> 
    Some vertically centered text 
</div>

例子：http://jsfiddle.net/Djvv7/

来源

2011-10-26 02:27:58 AlienWebguy

您需要申请一个CSS复位。在所有项目中使用一种良好做法。我知道的最有名的是：http://meyerweb.com/eric/tools/css/reset/

来源

2011-10-26 02:52:37

我已经申请了一个 – butterywombat

webkit vs firefox文本的高度

回答

相关问题