7

最近、IE10 で奇妙な問題に遭遇しました (ため息)。display:inline-block; を使用すると表示されます。オーバーフローと組み合わせて:hidden; IE10 は行の高さを台無しにします。vertical-align:middle; を使用して修正しようとしました。しかし、それはIE10の問題をほとんど修正するだけで、他のブラウザではベースラインの問題を引き起こします.

バグをトリガーするために必要な唯一のコードは次のとおりです。

CSS:

.bug {
  display:inline-block;
  overflow:hidden;
}

HTML:

<p>This should <span class="bug">be buggy</span> in IE10</p>

バグを説明するために JSFiddle を作成しました - http://jsfiddle.net/laustdeeuran/5pWMQ/。

ここにもバグのスクリーンショットがあります - https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a

編集：

これは IE10 のバグではありません (ただし、私に代わって遅延テストを行った場合です)。実際、Chrome (webkit) が間違っています - https://stackoverflow.com/a/15883508/799327。

4

1 に答える 1

11

CSS 2.1によると

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

これはまさに IE10 が行っていることです。

Firefox と Opera も同じことをしています。

バグがあるのは IE ではなく、上記のルールに正しく従っていない Chrome です。

于 2013-04-08T15:46:36.917 に答える