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*/
}

Chrome22.0.1229.94で期待どおりの結果が得られます

しかし、Firefox 15.0.1では、奇妙な結果が得られます（div.tag-tail要素が下にシフトされます）！

このjsFiddleを使用して、FFとChromeの結果を比較できます。

overflow:hidden;セレクター/ルールにプロパティを追加すると問題が解決することは知っています.tag-tailが、FFにこれが必要な理由と、動作にこの違いがある理由を理解したいと思います。

ご回答ありがとうございます！

4

3 に答える 3

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を参照してください

于 2012-10-23T17:56:04.900 に答える
0

追加するoverflow:hidden;のは奇妙なことのように思えます。

コメントでロイックが提案したことを行います：

垂直方向の配置を追加します。私は以前に同様の問題を経験していました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 が縮小します。これは、何かを「インライン ブロック」に設定した場合と非常によく似ています。ただし、インライン ブロックとは異なり、コード内の空白が混乱することを心配する必要はありません。表示ブロックは、先頭と末尾の空白を無視します。

于 2012-10-23T18:03:55.820 に答える