Negative margin different result on safari than any other browser

CSS:

dd
{
    margin: -1.2em 4em 0 1em;
}

This is the only CSS rule applied. The negative margin is pushing it more to the top 开发者_运维知识库on Safari than on any other browser. I have tested it with Chrome and Firefox (all on Mac OS X).

How could I make it behave the same on all browsers?

use display:block; on your element to make Safari see it the same as in FF, IE and Chrome.

I just ran into this using percentage based negative values for margin-top: they looked fine everywhere but mobile safari and mobile chrome. Changing the position from absolute to relative did the trick for me.

Without seeing more of your code, it's hard to determine what might be happening ... especially regard to the cascade affecting the element.

However, try changing your ems to pixels:

dd { margin: -12px 40px 0 10px; }

Note: You may need to adjust the pixel values, but you get the idea.

Every em value is relative to its parent's value. If you are using em's as a straight substitution for pixel values, this can cause problems.