display：inline-block和overflow：隱藏導致不同的垂直對齊

以下代碼在不同瀏覽器中呈現不同（IE = FF =高於基線，Chrome =基準）。display：inline-block和overflow：隱藏導致不同的垂直對齊

是誰的錯？我應該在哪裏提交錯誤報告？
你知道一個如何解決這個跨瀏覽器問題的方法嗎？如果我改變垂直對齊方式，我可以在一些瀏覽器中使用它，但不能使用其他瀏覽器。

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline-block; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

http://jsfiddle.net/T2vQj/

來源

2013-02-14 mh543

看來Chrome是錯誤的。該CSS 2.1 spec說

的「inline-block的」的基礎是它的最後一行箱在正常流量基線，除非它有或者沒有在流線箱，或者如果它的「溢出」屬性具有除「可見」以外的計算值，在這種情況下基線是底部邊緣邊緣。

由於overflow屬性計算比「可見的」內聯塊的基準線爲底邊邊緣，它坐落在含行框的基線，因此必須籌集最多包含的文本，讓其他的東西該文本的下行空間。

來源

2013-02-14 08:16:04 Alohci

非常感謝。 http://code.google.com/p/chromium/issues/detail?id=176244 – mh543 2013-02-14 16:41:31

是。您需要執行以下操作：

刪除樣式overflow: hidden;。這裏不需要。只有當您給出width或text-overflow: ellipsis;時，您才需要此選項。
添加vertical-align: bottom;。當顯示從inline更改爲inline-block時，文本的垂直對齊將發生變化。

來源

2013-02-14 07:56:48

1.我發表了最小工作示例。我將所有不需要的東西都留給了我想要展示的行爲。 2.不，垂直對齊導致不同瀏覽器中的結果不同，如原始發佈中所述。 – mh543 2013-02-14 11:17:05

是的。每個瀏覽器都在其中處理'inline-block'的默認值。 – 2013-02-14 12:07:47

-1

嘗試這個

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

來源

2013-02-14 09:13:02 Kingk

display：inline-block和overflow：隱藏導致不同的垂直對齊

回答

相關問題