容器中的垂直對齊文本WebKit vs Firefox

問題是，當包含在具有均勻高度/行高和字體大小不均勻的元素中時，基於Firefox和WebKit的瀏覽器似乎以不同方式對齊文本垂直對齊（或相反亦然）。我看了一些類似的線索，但我沒有真正看到我的問題有任何很好的解釋。容器中的垂直對齊文本WebKit vs Firefox

考慮http://alternativeto.net/test2.htm。這是一個非常簡單的頁面只是

.box 
    { 
     font-size: 15px; 
     font-family: Helvetica, Arial; 
     background-color: Blue; 
     height: 20px; 
     width: 60px; 
     color: White; 
     line-height: 20px; 
    }

而且

<div class="box"> 
     A text. 
    </div>

如果您在Chrome和Firefox瀏覽器打開網頁了你注意到它們對齊文本以不同的方式：http://screencast.com/t/tjgA2d7T

是有沒有辦法解決這個問題？有沒有「文本對齊」屬性或我錯過了什麼？

來源

2011-05-04 Olaj

這是瀏覽器呈現問題。使用行高度1px的小於給定高度，例如：

.box 
{ 
    background-color: Blue; 
    color: White; 
    font-family: Helvetica,Arial; 
    font-size: 15px; 
    height: 18px; 
    line-height: 17px; 
    width: 60px; 
}

來源

2011-05-04 08:29:42

這很好，但只適用於非輸入/按鈕元素。我還沒有弄清楚爲什麼，但是在類型按鈕的輸入元素上設置固定的高度，任何類型的提交或重置或按鈕元素設置元素的外部寬度，而不是內部寬度與其他標準元素包括a，span和div。 – 2012-04-21 02:01:55

如果你正在尋找一個方式做一個精確的垂直對齊，檢查堆棧溢出問題Problem with vertical-align: middle; - 我所描述的解決方案在那裏。

如果你想得到一個答案，爲什麼Firebug和Chrome顯示不同，這會更復雜一點。線高對齊基於字體線渲染，字體可以在瀏覽器中以不同的方式處理。例如，字體平滑和字體權重可以真正混淆你的頁面。

另外，你是否使用CSS重置爲這個頁面？它還包含與字體相關的調整，它可以幫助您克服跨瀏覽器問題。參考CSS Tools: Reset CSS。

來源

2011-05-04 08:31:45

這是由於瀏覽器處理亞像素文本定位的差異。如果您的行高爲20 像素，但字體大小爲15像素，則文本需要從行框頂部定位2.5 像素。 Gecko實際上會這樣做（然後根據需要在繪畫上反鋸齒或捕捉像素網格）。 WebKit只是在佈局過程中將位置舍入爲整數像素。在某些情況下，這兩種方法會給出像素差異的答案。除非你將它們並排比較，否則你甚至可以告訴它們有什麼不同？

在任何情況下，如果您真的需要這樣做，確保您的半前一個整數（即行高減去字體大小均勻）將使渲染更加一致。

來源

2011-05-04 12:24:20

呃，可怕但真實！我只是碰到了這個問題，試圖在一個圖標上創建微小的氣泡 - 這麼小，我不得不緊靠文本，以便每個像素點數。使行高度小於文字大小的1倍可以平衡FF和Chrome之間的顯示字段。

來源

2011-10-22 02:46:07 mahalie

Lol，+1，因爲我處於製作「微小泡泡數」的相同情況（註釋數量有點多），而且實際上一個像素點是顯而易見的。 – 2012-08-28 17:21:19

容器中的垂直對齊文本WebKit vs Firefox

回答

相關問題