Different rendering in Chrome vs Firefox

[Misho]

Hi!

I have a situation where the same element has extra bottom margin in Firefox, while in Chrome it shows up as intended:

Is this normal?

Can this be fixed, or should I use this:

@-moz-document url-prefix() {

}

Thanks!

[thai]

Hi There,

Please add this element CSS to your line:

@-moz-document url-prefix() {
     $el {
          margin-top: -5px !important;
     }     
}

Hope it helps

[Misho]

Hi!

So there will be no official fix? We’ll have to adjust for Firefox?
Ok, good to know!

Thanks!

[rad]

Hi @Misho,

It’s related to this, https://stackoverflow.com/questions/31386307/css-line-height-not-the-same-in-firefox-and-chrome. It looks like, it works on firefox if the body line height is 1.2

I’ll add this our issue tracker.

Another fix is this CSS within global custom CSS.

@-moz-document url-prefix() {
body {
    line-height: 1.2;
}
}

Thanks!