IE10 line-height bug with display：inline-block;和overflow：hidden; [英] IE10 line-height bug with display:inline-block; and overflow:hidden;

问题描述

所以，我最近遇到了IE10中的一个特殊问题（ sigh ）。看来如果你使用display：inline-block;结合overflow：hidden; IE10混乱了你的行高。
我尝试使用vertical-align：middle;但只是几乎解决了IE10中的问题，然后在其他浏览器中引入基线问题。

So, I've recently run in to a peculiar problem in IE10 (sigh). It appears that if you use display:inline-block; in conjunction with overflow:hidden; IE10 messes up your line-height. I tried fixing it using vertical-align:middle; but that only almost fixes the problem in IE10 and then introduces baseline problems in other browsers.

触发该错误所需的唯一代码是：

The only code needed to trigger the bug is:

CSS ：

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

HTML： b

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

我创建了一个JSFiddle来说明错误 - http://jsfiddle.net/laustdeleuran/5pWMQ/ 。

I created a JSFiddle to illustrate the bug - http://jsfiddle.net/laustdeleuran/5pWMQ/.

此处还有一个错误的屏幕截图 - http://cl.ly/ image / 2U1g3i0b0Y2y

There's also a screenshot of the bug here - http://cl.ly/image/2U1g3i0b0Y2y

以前有人看过/修复过这个问题吗？

Has anyone seen / fixed this problem before?

：

这不是一个IE10错误（但是更多的情况是我代表懒惰测试）。实际上，Chrome（webkit）是错误的 - http://stackoverflow.com/a/15883508/799327 。

This is not a IE10 bug (but more a case of lazy testing on my behalf). Actually Chrome (webkit) is the one doing it wrong - http://stackoverflow.com/a/15883508/799327.

推荐答案

CSS 2.1 说

'inline-block'的基线是其最后一个行框的基线
正常流程，除非它有没有流入线框或如果
它的overflow属性有一个计算值不是可见，在
这种情况​​下基线是底部边缘。

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

这正是IE10正在做的事。

which is exactly what IE10 is doing.

这不是IE的bug，它是Chrome，这是不正确的上述规则。

It's not IE that's bugged, it's Chrome, which is not following the above rule correctly.

这篇关于IE10 line-height bug with display：inline-block;和overflow：hidden;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！