Different line-height in Chrome and Firefox

Question

http://i.imgur.com/WnRm9aw.png

Seems like an issue with line-height. I have line-height:1 in CSS reset, which seems to be causing the issue. However, even when I set up specific line-height (in pixels) to that element, there is still the difference.

When I remove the line-height property from CSS reset altogether, it does indeed make the gap equal in both browsers, however the orange background - parent - gets stretched by 6 pixels in Chrome.

Is there any work-around? Thanks

Answer 1

I have run into many issues in which browsers interpret CSS differently. One option is to see if Chrome is adding extra padding to the element via a user-agent stylesheet, or by its rendering process. If so, you can see try experimenting with this for an efficient solution: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start

Another possibility, which is less desirable would be to do this in CSS (detects webkit browsers i.e. Chrome and Safari) and override padding styles so that they appear the same in both browsers:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourDiv {
        padding: 2px;
    }
}