簡單的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; 
}