IE9为显示行增加了额外的高度：inline-block和overflow-x：hidden;
[英]IE9 adding extra height to lines with display:inline-block and overflow-x:hidden;
问题描述
Look at the example HTML code below, it works nicely with all browsers apart from IE9 (haven't tested earlier IE versions). 
看看下面的示例HTML代码，它可以很好地适用于除IE9之外的所有浏览器（尚未测试早期的IE版本）。
Comparing the page shown by IE9 and Chrome for instance, you will see that IE9 adds extra height to the lines. 比较IE9和Chrome显示的页面，您将看到IE9为线条增加了额外的高度。 This happens when display:inline-block and overflow-x:hidden; 当display：inline-block和overflow-x：hidden; are present. 存在。 The issue also happens only if is present (but I need that for other features, this is just a minimal example showing the issue). 问题也只会出现（但我需要其他功能，这只是一个显示问题的最小例子）。 Removing either or overflow-x:hidden; 删除或溢出-x：隐藏; then also IE9 displays more compact lines (same height as Chrome). 然后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>
Link to page with the content above: http://pgn4web.devio.us/pgn4web/IE9bug.html Try opening the link with IE9 and Chrome! 链接到上面的内容页面： http ： //pgn4web.devio.us/pgn4web/IE9bug.html尝试打开IE9和Chrome的链接！ You'll see lines spaced with more blank space with IE9. 你会看到用IE9分隔更多空格的线条。 If then you open the IE9 debugger pressing F12 and you disable the overflow-x:hidden; 如果那样你打开IE9调试器按F12并禁用overflow-x：hidden; attribute, you will see the list getting more compact on IE; 属性，你会看到IE上的列表越来越紧凑; if you do the same with the Chrome debugger, the display does not change. 如果您使用Chrome调试器执行相同操作，则显示不会更改。
Any suggestion how to avoid the extra height added by IE9 (by keeping and overflow-x:hidden;)? 任何建议如何避免IE9添加的额外高度（通过保持和溢出-x：隐藏;）？
Thanks 谢谢
4 个解决方案
解决方案1
1 2013-03-06 12:59:06
I've encountered this problem numerous times when trying to add text-overflow to an a element. 我尝试添加的时候遇到了这个问题无数次text-overflow来的a元素。 I needed the element to have a width in order to control the overflow, so I added display: inline-block , but IE9 would therefore position the element higher than where it should be (and is on all other browsers. 我需要元素有一个宽度来控制溢出，所以我添加了display: inline-block ，但是因此IE9会将元素放在比它应该的位置更高的位置（并且在所有其他浏览器上）。
Long story short, the problem was the vertical-align which I have set to bottom and the problem was fixed. 长话短说，问题是vertical-align ，我已经设置bottom ，问题得到解决。 If your case is similar to mine, this could be the solution to your problem. 如果您的情况与我的相似，这可能是您的问题的解决方案。
vertical-align: bottom;
解决方案2
0 2012-11-24 08:12:53
I encournted the same problem today. 我今天也遇到了同样的问题。 Here's my work around for you: 这是我的工作：
div {
line-height: 0;
}
span {
line-height: 1.1; /* set back to normal */
}
or 要么
div {
height: 20px;
}
span {
height: 100%;
}
or 要么
use display:block; 使用display：block; height: 100%; 身高：100％;
Still trying find the roort cause. 还在努力找到这个原因。
解决方案3
0 2012-03-03 11:16:12
Does IE9 behave when you add a full, real doctype? 当您添加完整的真实文档类型时，IE9会表现吗？ Browsers do check what comes after the word "Doctype"... this is why you could get browsers to go into Quirks or Almost-Standards Modes with a doctype containing the word PUBLIC but then not having the referrer URL afterwards (and why when the WHATWG tried to reduce the doctype to as small as possible, found that the bare minimum necessary was <!doctype html>... yes, on some forums we all thought we could get away with silly things like <!doctype foo> and be awesome but we were disappointed when one browser or another went batshit on us :( which is too bad, I would love a <!doctype foo>). 浏览器会检查“Doctype”这个词后面的内容......这就是为什么你可以让浏览器进入Quirks或Almost-Standards Modes，其中包含一个包含单词PUBLIC的doctype但之后没有引用URL（以及为什么当WHATWG试图将doctype减少到尽可能小，发现最低限度必需的是<！doctype html> ...是的，在某些论坛上我们都认为我们可以通过<！doctype foo>等愚蠢的东西逃脱太棒了，但是当一个浏览器或其他浏览器对我们进行了抨击时我们很失望:(这太糟糕了，我会喜欢<！doctype foo>）。
Second, I would be horribly uncomfortable setting an normally-inline element to some kind of block setting and then playing with overflow without setting things like: 其次，我会非常不舒服地将常规内联元素设置为某种块设置，然后使用溢出来播放而不设置如下内容：
a font size, esp.
字体大小，尤其是 it's a good idea to set a % font size on the body first, and a line-height 首先在主体上设置％字体大小和行高是个好主意 a font-size, line-height and/or height on the element you've changed.
您更改的元素上的字体大小，行高和/或高度。 vertical-align.
垂直对齐。 This element has been set to display: inline-block after all. 此元素已设置为显示：inline-block。
I wish I could get my virtualBox running so I could see for myself in IE9, but what does its developer toolbar tell you about the span? 我希望我可以让我的virtualBox运行，所以我可以在IE9中看到自己，但是它的开发人员工具栏会告诉你有关跨度的信息？ Is it getting a different height? 它有不同的高度吗？ A different line-height? 不同的线高？ What happens when you set a background-color on the span? 在跨度上设置背景颜色时会发生什么？ What happens when you change the vertical-alignment on the span (inline-block elements are sensitive to vertical-align and no, I haven't found browsers to agree on what the default if I don't explicitly set it myself). 当您更改跨度上的垂直对齐时会发生什么（内联块元素对vertical-align敏感而不是，如果我没有自己明确设置，我还没有找到浏览器同意默认值）。
解决方案4
0 2012-03-03 11:29:04
Try this code - 试试这个代码 -
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.