次のコードは異なるブラウザでレンダリングされます （IE = FF =ベースラインより高い、Chrome =ベースライン）。display：インラインブロックとオーバーフロー：非表示の異なる垂直アライメント
誰の誤りですか？どこにバグレポートを提出すればよいですか？
この解決済みのクロスブラウザを取得する方法を知っていますか。私が垂直方向の配置を変更すると、いくつかのブラウザで動作するようになりますが、他のブラウザでは動作しません。
<!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>
Chromeに間違いがあるようです。 CSS 2.1 specは、その「オーバーフロー」プロパティをなしにフローラインボックスのいずれかを有するか、または 場合れない限り「インラインブロック」のベースラインは、通常の流れで、その最後の行ボックス のベースラインである
言います'visible'以外の計算値がある場合は、 にあります。この場合、ベースラインはボトムマージンエッジです。
オーバーフロープロパティが「可視」以外に計算するためインラインブロックのベースラインを含む行ボックスのベースラインに着座下マージン辺であり、従ってできるように含まれるテキストを上げなければなりませんそのテキストの子孫のためのスペース。
はい。あなたはこれらを行う必要があります：
スタイルを削除します。overflow: hidden;。これはここでは必要ありません。 widthまたはtext-overflow: ellipsis;を指定した場合にのみ必要です。
vertical-align: bottom;を追加します。ディスプレイがinlineからinline-blockに変更されると、テキストの垂直方向の配置が変わります。
1を試してみて、私は、最小限の作業例を発表しました。私は、私が見せようとしていた振る舞いを再現するために必要ではないすべてを残しました。 2.いいえ、垂直方向の整列は、元の投稿に記載されているように、ブラウザによって異なる結果につながります。 – mh543
はい。各ブラウザは 'inline-block'のデフォルト値を処理します。 –
この
<!doctype html>
<html>
<head>
<style>
.a {
display: inline;
overflow: hidden;
color: red;
}
</style>
</head>
<body>
baseline__<div class="a">test</div>__baseline
</body>
</html>
ありがとう。 http://code.google.com/p/chromium/issues/detail?id=176244 – mh543