html - 跨浏览器行内块对齐

Question

我在 safari 上遇到了这种奇怪的行为，这在 chrome 或 firefox 上不会发生。我有一个带有相同大小的框（内联块）的布局。框内有文本，在带有“溢出：隐藏；”的 div 内。在 chrome 和 firefox 上，这些框完全对齐，但在 safari 上，如果文本超过一行，则框“向上移动”，弄乱了对齐方式。任何帮助理解和纠正这一点将不胜感激。谢谢。

CSS：

.pb {
    background: #ddd;
    display: inline-block;
    margin: 4px;
    padding: 16px;
}
.pb .dt {
    width: 100px;
}
.pb .qt {
    height: 15px;
    overflow: hidden;
}

HTML（每个框）：

<div class="pb">
    <div class="dt">
        <div class="qt"><span>TEXT HERE</span> 
        </div>
    </div>
</div>

jsfiddle在这里

Answer 1

您需要设置vertical-align属性：

.pb {
    background: #ddd;
    display: inline-block;
    margin: 4px;
    padding: 16px;
    vertical-align:top;
}

jsFiddle 示例