1

使用此 HTML 标记：

<html>
<body>
    <ul class="tag-list">
        <li class="tag"><div class="tag-label">short tag</div><div class="tag-tail tag-count">1154353</div></li><!--no whitespaces between list items!!--><li class="tag"><div class="tag-label">A quite long long long long long tag</div><div class="tag-tail tag-active">5</div></li>
    </ul>
</body>

而这个 CSS 规则：

.tag-list {
    border:1px solid red;
}

.tag {
    border:1px solid green;
    display:inline-block;/*so that tags are lined up like words... */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    white-space:nowrap; /* so that label & tail sub-divs are stuck all together */
    height: 2em;
    line-height: 2em; /* text is vertically centered */
}

.tag > div {
    height: 100%;
    display:inline-block; /*so that label&tail are lined up */    
}

.tag-tail {
    border:1px solid orange;
}

.tag-label {
    border:1px solid blue;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:10em; /* to generate a (text) overflow for the ellipsis*/
}

我在 Chrome 22.0.1229.94 中得到了预期的结果

但是在 Firefox 15.0.1 中，我得到了一个奇怪的结果（div.tag-tail元素向下移动）！

您可以将 FF 和 Chrome 中的结果与此jsFiddle进行比较。

我知道将属性添加overflow:hidden;到选择器/规则可以.tag-tail解决问题，但我想了解为什么 FF 需要这样做，以及为什么在行为上有这种差异？

谢谢您的回答 ！

4

3 回答 3

1

CSS 规范在http://www.w3.org/TR/CSS21/visudet.html#leading最后一段说：

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

因此，在您的情况下，.tag-label它的基线位于其边距边缘的底部（并且由于它没有边距，这意味着它位于其底部边框的底部边缘。但.tag-tail它的基线位于其内部文本的基线上。并且因为这里的所有内容都是基线对齐的，这意味着.tag-tail需要在与.tag-label.

这正是 Firefox 所做的。Chrome 没有正确实现内联块的基线规范；见https://bugs.webkit.org/show_bug.cgi?id=36084

于 2012-10-23T17:56:04.900 回答
0

添加overflow:hidden;似乎是一件奇怪的事情。

我会做loic在评论中建议的事情：

添加垂直对齐。我之前遇到过类似的问题，vertical-align:top;这也是我的解决方案。（顺便说一句，Firefox 16 也会显示不良结果。）

.tag > div {  
     height: 100%;  
    display:inline-block;   
    vertical-align:top;  
    }
于 2012-10-23T09:50:35.557 回答
0

您在 .tag-label 中发生的事情太多了

这是您的解决方案：http: //jsfiddle.net/mrbinky3000/JU5Cr/

.tag-label {
    border:1px solid blue;
}

但这是一个更好的解决方案：http: //jsfiddle.net/mrbinky3000/gwb7d/1/

.tag-list {
    border: 1px solid red;
    display: block;
}

.tag {
    border:1px solid green;
    display:inline-block;/*so that tags are lined up like words... */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    white-space:nowrap; /* so that label & tail sub-divs are stuck all together */
    height: 2em;
    line-height: 2em; /* text is vertically centered */
    overflow: hidden;

}

.tag > div {
    height: 100%;
    display:block;
    float: left;        
}

.tag-tail {
    border:1px solid orange;
}

.tag-label {
    border:1px solid blue;
}

如果您浮动一个 div，它会从“页面流”中出来，并且 div 会缩小以适应内容，这与您将某些内容设置为“inline-block”时发生的情况非常相似。但是，与 inline-block 不同的是，您不必担心代码中的空格会搞砸。显示块忽略前导和尾随空格。

于 2012-10-23T18:03:55.820 回答