Chrome和Firefox對文本有不同的垂直對齊方式

如何才能實現div內的文本在Firefox和Chrome中具有相同的padding-top？在Firefox中，默認情況下它的頂部爲3px，而Chrome只有2px。Chrome和Firefox對文本有不同的垂直對齊方式

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; 
}

-1

您只需設置文本的領導與CSS line-height財產。不同的瀏覽器可能會有不同的默認值。

2014-07-15 10:34:25

比較FF和Chrome，你的解決方案不起作用[的jsfiddle（http://jsfiddle.net/vJB4F/5/） – user2952265

請把我的代碼仔細一看，那不是我做了什麼。我使用了一個像素值，因此線塊的高度在瀏覽器中始終保持不變。由於呈現技術或字體變體或使用的格式，在瀏覽器之間呈現字形時會有微妙的差異。 –

[js fiddle]（http://jsfiddle.net/vJB4F/8/） - >即使使用像素，如果使用小盒子內的小字體，則會出現1像素差異，這看起來很奇怪。似乎沒有解決方案。 – user2952265

-1

你使用復位CSS？請參閱http://www.cssreset.com/，並進行測試。

2014-07-15 10:34:30

回去了，但計算的像素到頂部，鉻仍然是不同的[的jsfiddle]（http://jsfiddle.net/vJB4F/6/） – user2952265

-1

不同的瀏覽器及其核心在html代碼中使用不同的默認設置。最簡單的解決方案是每次使用重置css代碼。必須在代碼之前包含該代碼，並重新排列您可能會發現的所有差異。

2014-07-15 10:35:29

復位CSS不「重新排列」差異（如[正常化CSS] （http://necolas.github.io/normalize.css/）），它_removes_默認樣式。 –

它沒有工作。 [js fiddle]（http://jsfiddle.net/vJB4F/4/） – user2952265

你有想法..我的英語不完美！ –

如果你想在div內垂直對齊文本。

參考的問題，讓您的答案Vertically align text in a div

您的DIV 50px高度。所以只需簡單地給line-height:50px;財產給你的班級。如果你增加你的身高div，那麼你的身高也會增加。

如果要將文本居中對齊，請添加text-align:center;。

2014-07-15 11:23:32

回答