html - IE9 向显示 :inline-block and overflow-x:hidden; 的行添加额外高度

Question

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

例如比较IE9和Chrome显示的页面，你会发现IE9给线条增加了额外的高度。当 display:inline-block 和 overflow-x:hidden 时会发生这种情况；存在。该问题也仅在存在时才会发生(但对于其他功能我需要它，这只是显示该问题的最小示例)。删除或 overflow-x:hidden;然后 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 中，您会看到行间距更多的空格。如果然后你打开 IE9 调试器按 F12 并禁用 overflow-x:hidden;属性，你会看到列表在 IE 上变得更紧凑；如果您对 Chrome 调试器执行相同的操作，则显示不会改变。

有什么建议可以避免 IE9 增加额外的高度(通过保留和溢出-x:hidden;)吗？

谢谢

Answer 1

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

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

vertical-align: bottom;