問題

私は最近、IE10で特有の問題に遭遇しました(ため息)。 display:inline-blockを使用すると、overflow: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/laustdeleuran/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

  ベストアンサー

CSS 2.1 は言う

'inline-block'のベースラインは、最後の行ボックスのベースラインです 通常の流れでは、インフローラインボックスがないか、 その 'overflow'プロパティは 'visible'以外の計算値を持っています。 この場合、ベースラインはボトムマージンエッジです。

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

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

それは盗聴されているIEではなく、上記のルールに正しく従っていないChromeです。

  同じタグがついた質問を見る

overflowinternet-explorer-10css