简单的CSS对齐：适用于Firefox但不适用于Safari或Chrome？

Question

http://test.heyscout.com/video.html

我认为CSS代码看起来正确。 当我在Firefox中打开它时，它打开很好，视频排成一行。但是，如果我在Chrome或Safari中打开它，它会全部错位。有什么想法吗？

我觉得它可能与设置显示有关：正确阻止内联块。

Answer 1

这是因为inline-block元素依赖于空白区域。

如果您将#space2 div宽度缩小为49%，则它们会在safari＆amp;铬

标记中的空白区域导致两个div之间存在一点差距，即使宽度加起来也达到100％。如果你摆脱白色空间并压缩你的HTML部分，两个宽度50％工作正常..我只是在chrome ver 25.0.1364.97测试它。

Answer 2

#space1 {
width: 50%;
height: 350px;
margin: 0;
display: inline-block;
float: left;
}

#space2 {
width: 50%;
height: 350px;
/* float: right; */
display: inline-block;
vertical-align: middle;
}