IE9 为带有 display:inline-block 和 overflow-x:hidden 的行添加额外的高度；答案

【问题标题】：IE9 adding extra height to lines with display:inline-block and overflow-x:hidden;IE9 为带有 display:inline-block 和 overflow-x:hidden 的行添加额外的高度；
【发布时间】：2012-02-23 11:44:25
【问题描述】：

看看下面的示例 HTML 代码，它适用于除 IE9 之外的所有浏览器（尚未测试早期的 IE 版本）。

例如，比较 IE9 和 Chrome 显示的页面，您会看到 IE9 为线条增加了额外的高度。这发生在 display:inline-block 和 overflow-x:hidden;存在。该问题也仅在存在时才会发生（但我需要其他功能，这只是一个显示问题的最小示例）。删除或溢出-x：隐藏；然后 IE9 也会显示更紧凑的线条（与 Chrome 相同的高度）。

<!DOCTYPE>

<style>  span { display: inline-block; width: 50px; overflow-x: hidden; } </style>

<div><span>1st</span><span>first</span></div>
<div><span>2nd</span><span>second</span></div>
<div><span>3rd</span><span>third</span></div>
<div><span>4th</span><span>fourth</span></div>
<div><span>5th</span><span>fifth</span></div>
<div><span>6th</span><span>sixth</span></div>
<div><span>7th</span><span>seventh</span></div>
<div><span>8th</span><span>eight</span></div>
<div><span>9th</span><span>ninth</span></div>

链接到以上内容的页面：http://pgn4web.devio.us/pgn4web/IE9bug.html 尝试用 IE9 和 Chrome 打开链接！在 IE9 中，您会看到以更多空格分隔的行。如果然后按 F12 打开 IE9 调试器并禁用 overflow-x:hidden;属性，您会看到列表在 IE 上变得更加紧凑；如果您对 Chrome 调试器执行相同操作，则显示不会改变。

有什么建议可以避免 IE9 添加的额外高度（通过保持和溢出-x:hidden;）？

谢谢

【问题讨论】：

您应该在进行跨浏览器 Web 开发之前使用重置样式。 HTML5 Boilerplate 是一个很好的开始。
@balexandre：你可能是对的，但仍然没有解释 IE9 的行为，我越想越像一个 bug……

标签： html internet-explorer-9

【解决方案1】：

我在尝试将text-overflow 添加到a 元素时多次遇到此问题。我需要元素有一个宽度来控制溢出，所以我添加了display: inline-block，但 IE9 会因此将元素定位在它应该在的位置之上（并且在所有其他浏览器上。

长话短说，问题是我设置为bottom 的vertical-align，问题已解决。如果您的情况与我的相似，这可能是您的问题的解决方案。

vertical-align: bottom;

【讨论】：

【解决方案2】：

当您添加完整的、真实的文档类型时，IE9 的行为是否正常？浏览器确实会检查单词“Doctype”之后的内容......这就是为什么您可以让浏览器进入 Quirks 或几乎标准模式，其 doctype 包含单词 PUBLIC 但之后没有引荐来源网址（以及为什么当WHATWG 试图将 doctype 减少到尽可能小，发现最低限度是 ... 是的，在某些论坛上，我们都认为我们可以摆脱像这样的愚蠢事情太棒了，但是当一个或另一个浏览器对我们大放异彩时，我们感到很失望:(这太糟糕了，我会喜欢 )。

其次，我会非常不舒服将正常内联元素设置为某种块设置，然后在不设置以下内容的情况下玩溢出：

字体大小，特别是。最好先在正文上设置 % 字体大小和行高
您已更改的元素的字体大小、行高和/或高度。
垂直对齐。这个元素已经设置为 display: inline-block 毕竟。

我希望我可以让我的 virtualBox 运行，这样我就可以在 IE9 中看到自己，但是它的开发人员工具栏告诉你什么关于跨度的信息？是不是长得不一样了？不同的行高？当您在跨度上设置背景颜色时会发生什么？当您更改跨度上的垂直对齐时会发生什么（内联块元素对垂直对齐很敏感，不，如果我自己没有明确设置它，我还没有发现浏览器就默认值达成一致）。

【讨论】：

【解决方案3】：

试试这个代码 -

<!DOCTYPE>

<style>  
div
{
    float:left;
    position:relative;
    width:100%;
}
span 
{ 
    display: block; 
    width: 50px; 
    overflow-x: hidden; 
    float:left;
} 
</style>

<div><span>1st</span><span>first</span></div>
<div><span>2nd</span><span>second</span></div>
<div><span>3rd</span><span>third</span></div>
<div><span>4th</span><span>fourth</span></div>

<div><span>5th</span><span>fifth</span></div>
<div><span>6th</span><span>sixth</span></div>
<div><span>7th</span><span>seventh</span></div>
<div><span>8th</span><span>eight</span></div>
<div><span>9th</span><span>ninth</span></div>

【讨论】：

float: left 将 span 置于块上下文中，因此您甚至可以将 display: block 部分排除在外。但是我们不知道为什么 OP 希望 span 是 inline-block 而不是块（但是，在这种情况下，也许 block/float 可以为 OP 完成工作）。

【解决方案4】：

我今天遇到了同样的问题。这是我为您解决的问题：

  div {
    line-height: 0;
  }
  span {
    line-height: 1.1; /* set back to normal */
  }

或

div {
  height: 20px;
}

span {
  height: 100%;
}

或

使用显示：块；高度：100%；

仍在努力寻找根本原因。

【讨论】：