CSS3 columns behaving differently in different browsers

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 igno开发者_JAVA技巧res 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/

not sure if it's still actual, but i did some reading and doctype might be the reason. http://www.opera.com/docs/specs/presto28/doctypes/ just sayin'