Question

使用此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需要这个以及为什么行为存在这种差异？

感谢您的回答！

Answer 1

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

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

所以在你的情况下，.tag-label的边缘位于其边缘的底部（因为它没有边距，这意味着它在底部边界的底部边缘。但是.tag-tail在其中的文本的基线上有其基线。由于这里的所有内容都是基线对齐的，这意味着.tag-tail中文本的基线需要最终位于与底部相同的垂直位置。 .tag-label的边框。

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

Answer 2

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

我会做评论中建议的 loic ：

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

.tag > div {  
     height: 100%;  
    display:inline-block;   
    vertical-align:top;  
    }

Answer 3

你只是在.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会缩小以适应内容，这与你设置“内联块”时发生的情况非常相似。但是，与内联块不同，您不必担心代码中的空格会搞乱。显示块忽略前导和尾随空格。

与Chrome中的预期结果相比，Firefox中的奇怪CSS结果（某些div未对齐但向下移动）

3 个答案: