CSS3列在不同的浏览器中表现不同

时间:2011-08-25 21:02:31

标签: css css3 cross-browser

以下是我在4个浏览器中编码的网站的屏幕截图:http://img801.imageshack.us/img801/2510/browsersj.jpg

有CSS3列(在IE中,有一个模拟CSS3列行为的jQuery插件)。正如您所看到的,Opera和Firefox使第一列相对于其他列略微降低。这是第一段的保证金。 Chrome会忽略第一段的边距并正确对齐所有内容。

我发现此CSS规则有助于消除此问题:

.column-3 > *:first-child { margin-top: 0; }

尽管如此,我觉得这有点hacky(如果我想在某些特定情况下保留第一个元素,那该怎么办?)。你碰巧知道这个问题的任何其他解决方案(最好是干净可靠的东西,有点像box-sizing属性,在不同的浏览器中处理不同的默认盒子模型)?

[编辑]

好吧,我发现在Firefox中,问题是在容器div上设置overflow:hidden;。删除它解决了这个问题。

仍然,Opera不会合作。

根据@Kyle的要求,这是在Opera中重现问题的代码:http://jsfiddle.net/LVqtD/1/

1 个答案:

答案 0 :(得分:0)

不确定它是否仍然存在,但我做了一些阅读和doctype可能是原因。 http://www.opera.com/docs/specs/presto28/doctypes/ 只是说'