行内块不能正确对齐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元素

回答

相关问题