html - シンプルな CSS 配置: Firefox では機能するが、Safari や Chrome では機能しない?

Question

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

CSSコードは正しいと思います。Firefox で開くと、問題なく開き、動画が並んでいます。しかし、Chrome や Safari で開くと、すべてずれてしまいます。理由はありますか？

display: inline-block を正しく設定する必要があるように感じます。

Answer 1

これは、inline-block要素が空白に依存しているためです。

#space2divの幅を小さくする49%と、サファリとクロームに揃えられます

マークアップの空白により、2つのdivの間にわずかなギャップが生じていますが、両方の幅が合計で100％になっています。空白を取り除き、HTMLのその部分を圧縮して、両方の幅を50％で正常に機能させる場合は、.. chromever25.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;
}