7

我最近在 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。

4

1 回答 1

11

CSS 2.1说

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

这正是 IE10 正在做的事情。

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

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

于 2013-04-08T15:46:36.917 回答