Is It Possible To Achieve Line-height Consistency In All Browsers?

Is it possible to achieve line-height consistency in all browsers? I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same wid

Solution 1:

Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).

In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.

Solution 2:

Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/

Solution 3:

You can add line-height for Mozilla only, by using:

@-moz-document url-prefix() {
    *, body {
        line-height: [as per your requirement];
    }
}

Solution 4:

Have you specified any common rules? e.g:

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
    line-height: 1;
}

Sometimes it's helpful, even without full reset.css approach.

Solution 5:

It might be how the font is being rendered. Try using this as a font family.

font-family:"Arial Unicode MS","Lucida Sans Unicode";