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%它们在 safari 和 chrome 上对齐

标记中的空白导致两个 div 之间存在一点差距，即使宽度加起来都是 100%。如果您摆脱空白并压缩 HTML 的那部分，使两个宽度都为 50% 工作正常.. 我刚刚在 chrome 版本 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;
}