CODEWITHSUNDEEP
css
Diesel
Diesel

Reputation: 5345

Firefox and Chrome button text baseline different

A button in Chrome vs Firefox:

enter image description hereenter image description here

the baseline in Firefox seems slightly higher for the text. Is there way to lower the text? Just adjusting the margins based on browser?

Chrome CSS:

enter image description here

Firefox CSS:

enter image description here

Upvotes: 1

Views: 795

Answers (2)

Diesel
Diesel

Reputation: 5345

The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.

Thanks Temani Afif for the pointer in the right direction.

Upvotes: 1

Łukasz Hartabus
Łukasz Hartabus

Reputation: 1

Use normalize.css. Most differents between browser will gone https://necolas.github.io/normalize.css/

Browsers have different base settings. Probably FF default line-height smallest then chrome. Anyway, Nobody find this different in normal using ;)

Upvotes: 0

Related Questions