跨浏览器内联块对齐 [英] cross browser inline-block alignment

问题描述

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

CSS:

.pb {背景:#ddd;显示:内联块；边距:4px；填充:16px；}.pb .dt {宽度:100px；}.pb .qt {高度:15px；溢出:隐藏；}

HTML(每个框):

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

jsfiddle 在这里

解决方案

你需要设置vertical-align属性:

.pb {背景:#ddd;显示:内联块；边距:4px；填充:16px；垂直对齐:顶部；}

jsFiddle 示例

I'm getting this weird behavior on safari, that doesn't happen on chrome or firefox. I have a layout with boxes (inline-block) with the same size. There is text inside the boxes, inside a div with "overflow: hidden;". On chrome and firefox, the boxes are perfectly aligned, but on safari, if the text grows more than one line, the box "moves" up, messing up the alignment. Any help understanding and correcting this would be appreciated. Thanks.

CSS:

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

HTML (each of the boxes):

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

jsfiddle here

解决方案

You need to set the vertical-align property:

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

jsFiddle example

这篇关于跨浏览器内联块对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！