IE10 line-height bug with display：inline-block;和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来说明错误 - 。

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

此处还有一个错误的屏幕截图 -

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

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

Has anyone seen / fixed this problem before?

：

这不是一个IE10错误（但是更多的情况是我代表懒惰测试）。实际上，Chrome（webkit）是错误的 - 。

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.

推荐答案

说

这正是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;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！