cross browser inline-block alignment [duplicate]

问题:

This question already has an answer here:

• Align inline-block DIVs to top of container element 4 answers

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

回答1:

You need to set the vertical-align property:

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

jsFiddle example