overflow：hidden;引起firefox中的对齐问题 [英] overflow: hidden ; causing alignment issues in firefox
问题描述
我有一个布局，在Webkit的浏览器，但在互联网浏览器和Firefox的垂直对齐关闭完美地呈现。代码的最简单的例子是：
I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is:
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>
看到＃content2 div相对于＃content1和＃content3 divs是向上推的。我有一个相对有力的理由在这种情况下使用内联块在浮动，但如果唯一的修复是移动到浮动，我必须得到它，但我宁愿避免该工作如果可能是因为目前的时间是我们的试点测试发布的时间，从长远来看，布局可以移动到浮动。
You'll see that the #content2 div is pushed up relative to the #content1 and #content3 divs. I've a relatively strong reason to use the inline-blocks over floats in this situation, however if the only "fix" is to move to floats I'll have to get on with it, however I'd rather avoid that work if possible as, currently, time is short for our pilot test launch, in the long term the layout could be moved to floats.
更进一步，我试图搞乱边缘和paddings没有成功。在这个混乱我已经确定，它是存在溢出：隐藏在＃内容2，导致这种线路中断的扭曲。
Further more, I've tried to mess with margins and paddings to no success. In that messing I've established that it is the presence of overflow: hidden in #content2 that causes this line-break-esque distortion.
任何帮助非常感激。 / p>
Any help much appreciated.
推荐答案
对于 inline-block 我通常指定 vertical-align：top 以减轻垂直对齐问题。请注意，在具有内联块的兄弟div之间将存在水平间隙，这只能通过杀死HTML中的文字空格来修复。
For inline-block I usually specify vertical-align:top to alleviate vertical alignment issues. And be aware that there will be horizontal gaps between the sibling divs that have inline-block, which can only be fixed by killing the literal whitespace in the HTML.
我希望你使用的是doctype。
And I hope you are using a doctype.
希望这有帮助，否则请设置一个jsfiddle使我可以看到这个。
Hope this helps, otherwise please setup a jsfiddle so I can visually see this.
这篇关于overflow：hidden;引起firefox中的对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
