带显示的IE10行高错误：内联块;溢出：隐藏;

Question

我最近遇到了IE10中的一个特殊问题（叹气）。看来如果你使用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/。

此处还有一个错误的屏幕截图 - 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。

Answer 1

CSS 2.1说

  

'内联块'的基线是其最后一个线框的基线   在正常流程中，除非它没有流入线框或如果   它的'overflow'属性有一个除'visible'以外的计算值   在哪种情况下，基线是底部边缘边缘。

这正是IE10正在做的事情。

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

这不是IE的错误，它是Chrome，它没有正确遵循上述规则。