CSS for Safari 4.0 but NOT Google Chrome

Question

Dear StackOverflow users, I'm having a problem with CSS. The style it's correctly applied in all browsers (IE6/7/8, Firefox 3+, Opera 9.5+, Google Chrome 3/4) but in Safari 4.0 it is not. If I use:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #blaat { margin: 1px 0px; }
}

I can make work in Safari, but then it breaks in Chrome. Anybody knows of any Safari 4.0 specific CSS hack?

Thanks.

Answer 1

Try to experiment with line-height. The default value for line-height is browser dependent so you can get different bounding box heights in different brwosers if you don't set line-height explicitely. For instance setting line-height: 1.2em (or 1.1em or 1.5em or whatever) should lead to the same height of the bounding box.