5

https://i.stack.imgur.com/8pGGL.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

Peter
  • 115
  • 1
  • 2
  • 6
  • There appears to be a default line-height set by Mozilla's user-agent stylesheet. Perhaps make the `line-height` rule inline with an `!important;` suffix? – Jace Cotton Oct 27 '13 at 02:07
  • Doesn't seem to make any difference unfortunately. – Peter Oct 27 '13 at 02:15
  • It is a very odd problem, one I run against a lot while designing UIs. Hope someone here has a feasible solution. This is one of the very few instances (I think) where browser-detection (while still not reliable) may be the only solution. – Jace Cotton Oct 27 '13 at 02:18
  • Post code, not just a screenshot. – Jukka K. Korpela Oct 27 '13 at 06:31

1 Answers1

2

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;
    }
}
ryanlutgen
  • 2,951
  • 1
  • 21
  • 31
  • I found the issue. The font I was using didn't support upper accents, so I fixed that in font squirrel - but browsers continued to ignore the new "line-height". I.e. upper accents were overflowwing and that somehow caused the issue. I fixed it by setting body line-height to 0.9 in Chrome. – Peter Oct 27 '13 at 10:11