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

Question

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

我认为CSS代码看起来不错。 当我在Firefox中打开它，它开辟了罚款和视频排队。但是，如果我在Chrome或Safari中打开它，它会全部错位。任何想法为什么？

我觉得它可能与设置display：inline-block正确。

Answer 1

这是因为inline-block元素是空白依赖..

如果降低#space2 DIV宽度49%他们在Safari &铬

在加价的空白导致出现对齐即使两个div的宽度加起来达到100％，也是两个div之间的小差距。如果你摆脱了空白，并压缩你的HTML的两部分宽度50％的工作正常..我只是在铬版本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; 
}