IE10 行高错误与显示：内联块；和溢出：隐藏；

我最近在 IE10 中遇到了一个特殊问题（sigh）。看来如果你使用 display:inline-block;与溢出：隐藏一起使用； 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/ http://jsfiddle.net/laustdeleuran/5pWMQ/.

这里还有一个错误的屏幕截图 -https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a

EDIT:

这不是 IE10 的错误（更多的是代表我的懒惰测试的情况）。实际上 Chrome (webkit) 是做错的 -https://stackoverflow.com/a/15883508/799327 https://stackoverflow.com/a/15883508/799327.

CSS 2.1 http://www.w3.org/TR/CSS2/visudet.html says

'inline-block' 的基线是其最后一个行框的基线 在正常流程中，除非它没有流入线框或者如果 它的“溢出”属性具有除“可见”之外的计算值，在 在这种情况下，基线是底部边距边缘。

这正是 IE10 正在做的事情。

Firefox 和 Opera 也在做同样的事情。

问题不是 IE，而是 Chrome，它没有正确遵循上述规则。