CSS3 列在不同浏览器中的行为不同

发布于 2024-12-01 20:25:33 字数 789 浏览 1 评论 0原文

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

有 CSS3 列（在 IE 中，有一个 jQuery 插件模拟CSS3 列行为）。正如您所看到的，Opera 和 Firefox 渲染的第一列相对于其他列稍微低一些。这是第一段的页边距。 Chrome 会忽略第一段的边距并正确对齐所有内容。

我发现这个 CSS 规则有助于消除这个问题：

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

不过，我发现这有点老套（如果我希望第一个元素在某些特定情况下保留边距怎么办？）。您碰巧知道这个问题的任何其他解决方案（最好是干净可靠的解决方案，有点像 box-sizing 属性，负责处理不同浏览器中的不同默认框模型）？

[编辑]

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

尽管如此，Opera 仍不会合作。

根据 @Kyle 的请求，以下是在 Opera 中重现该问题的代码： http://jsfiddle.net/LVqtD/ 1/

原文

Here's a screenshot of the website I'm coding in 4 browsers: http://img801.imageshack.us/img801/2510/browsersj.jpg

There are CSS3 columns (in IE, there's a jQuery plugin simulating the CSS3 columns behaviour). As you can see, Opera and Firefox render the first column slightly lowered in relation to the other columns. This is the first paragraph's margin. Chrome ignores the first paragraph's margin and aligns everything correctly.

I have found that this CSS rule helps to eliminate the issue:

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

Still, I find this a bit hacky (what if I WANT the first element to retain the margin in some specific scenario?). Do you happen to know of any other solutions to this problem (preferably something clean and reliable, sort of like the box-sizing property taking care of different default box models in different browsers)?

[EDIT]

Alright, I have found that in Firefox, the issue was an overflow:hidden; set on the container div. Removing it solved the issue.

Still, Opera won't cooperate.

As per @Kyle's request, here's the code to reproduce the issue in Opera: http://jsfiddle.net/LVqtD/1/

分享到QQ

分享到微博