8

次のコードは、ブラウザーによってレンダリングが異なります (IE = FF = ベースラインより高く、Chrome = ベースライン上)。

  1. 誰のせい？バグレポートはどこに提出すればよいですか?

  2. この解決済みのクロスブラウザを取得する方法を知っていますか. vertical-alignment を変更すると、一部のブラウザーでは機能しますが、他のブラウザーでは機能しません。

<!doctype html>
<html>
<head>
    <style>
        .a {
            display: inline-block;
            overflow: hidden;
            color: red;
        }
    </style>
</head>
<body>
    baseline__<div class="a">test</div>__baseline
</body>
</html>

http://jsfiddle.net/T2vQj/

4

3 に答える 3

8

はい。これらを行う必要があります：

  1. スタイルを削除しますoverflow: hidden;。ここでは必要ありません。widthまたはを指定する場合にのみ必要ですtext-overflow: ellipsis;。

  2. を追加しvertical-align: bottom;ます。inline表示が からに変わると、テキストの縦方向の配置が変わりますinline-block。

于 2013-02-14T07:56:48.643 に答える
6

Chrome がエラーになっているようです。CSS 2.1仕様によると

「インライン ブロック」のベースラインは、通常のフローの最後のライン ボックスのベースラインです。この場合、ベースラインはマージンの下端です。

オーバーフロー プロパティは「可視」以外のものを計算するため、インライン ブロックのベースラインは、含まれるライン ボックスのベースライン上にある下部マージンの端であり、したがって、含まれるテキストを持ち上げて、そのディセンダー用のスペースを確保する必要があります。文章。

于 2013-02-14T08:16:04.547 に答える
-1

これを試して

<!doctype html>
<html>
<head>
    <style>
        .a {
            display: inline; 
            overflow: hidden;
            color: red;
        }
    </style>
</head>
<body>
    baseline__<div class="a">test</div>__baseline
</body>
</html>
于 2013-02-14T09:13:02.603 に答える