webkit顯示：內嵌塊行爲不一致

我有一個跨度，其中有幾個其他跨度，我想切換display:block和display:inline之間的子跨度。跨度從display:inline-block開始，然後切換到display:block。這工作正常。問題是在Webkit中切換回來（它在Firefox中正常工作）：跨度在它們之間用額外換行符呈現。webkit顯示：內嵌塊行爲不一致

如果不在跨度之間插入<br/>標籤，我可以正確渲染嗎？

演示在這裏：http://jsbin.com/omalu3/4/edit

來源

2010-08-22 dpercy

現在是不是很好玩。

我不確定是什麼原因導致了這個問題，但是如果您將float: left;添加到#a.oneline *，它就會消失。當你這樣做，你可以更改顯示，以阻止讓你的風格是這樣的：

#a.multiline * { } 
#a.oneline * { float:left; } 
#a * { border:solid 1px black; display:block;}

這個解決方案和您的原始佈局之間的唯一區別是，oneline塊將在頂部，而不是對齊底部，但您可以爲這些元素設置固定高度。

來源

2010-08-22 04:09:18 derekerdmann

任何其他解決方案將是一個解決方法，因爲它是一個瀏覽器錯誤。的替代方法derekerdmann的解決方案：

#a.multiline * { width: 100% } 
    #a.oneline * { width: auto } 
    #a * { border:solid 1px black; display:inline-block }

來源

2010-09-18 16:40:11 Blaise

另一種解決方法是不換的孩子跨越與另一跨度 - 這是一個內聯元素。對於#a，使用<div>，並且它的行爲正確（至少在Webkit中！）。

另一方面，星形選擇器效率不高，但我明白這只是一個例子，所以我不打算在這裏批評：D

來源

2010-12-02 16:21:08 froddd

webkit顯示：內嵌塊行爲不一致

回答

相關問題