行內塊不能正確對齊div元素

我試圖垂直對齊一些div元素使用display: inline-block; 而不是浮動它們。當我向其中添加一些文字時，就會出現問題：出於一個奇怪的原因，Chrome會在不同的行上顯示不同的填充divs。

Firefox和IE工作正常。爲了更好地瞭解檢查this example

我該如何避免這種情況？

2013-04-18 Alex van

您需要添加全球包裝font-size: 0;並設置常規字體大小爲您在線塊，你還可以添加：letter-spacing: 0;和word-spacing: 0;，這樣的事情：

.wrapper { 
    font-size: 0; 
    letter-spacing: 0; 
    word-spacing: 0; 
} 

    .wrapper .inline_block { 
    display: inline-block; 
    font-size: 12px; 
    letter-spacing: 1px; 
    word-spacing: .1em; 
    vertical-align: top; 
    }

和例如小提琴：http://jsfiddle.net/3ab22/ 和更新小提琴：http://jsfiddle.net/3ab22/3/

來源

2013-04-18 08:51:56 Lukas

我照你的建議做了。對於前三個元素來說，問題是固定的，但不是最後一個。在這裏，看看 http://jsfiddle.net/pHCSx/14/ –

如果你有一些利潤或填充添加規則爲'：last-child'並重置它們 – Lukas

對不起，但這不是因爲的任何填充或餘量:( 在這裏，你可以看到在你的例子中有相同的問題 http://jsfiddle.net/3ab22/2/ 即使改變字體系列確實會改變DIVs位置的行爲。我只是無法弄清楚爲什麼是這個開始。 –

行內塊不能正確對齊div元素

回答

相關問題