Question

我在safari上遇到这种奇怪的行为，这在chrome或firefox上不会发生。我有一个带有相同大小的框（内联块）的布局。框内有文字，div内有“overflow：hidden;”。在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 here

Answer 1

您需要设置vertical-align属性：

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

<强> jsFiddle example

跨浏览器内联块对齐

1 个答案: