span height different in Firefox vs Chrome

Question

The following element:

<span>Test</span>

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
}

Has a height of 19px in Chrome, and 21px in Firefox (fiddle). I tried applying all sorts of CSS resets/normalization, the height is still different. The text itself is rendered identically, but the element height is off by 2 pixels, which breaks my layout.

Any way to fix it without using (inline) block elements?

Arash Hasanzade · Accepted Answer · 2018-03-05T09:18:45.363

2

Use this :

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block;
}

The difference is due to different render of fonts in browsers.

edited Mar 05 '18 at 09:18

answered Mar 05 '18 at 09:15

Arash Hasanzade

490
3
12

Yeah block elements work fine, but it has some side effects. Why isn't inline working? – riv Mar 05 '18 at 09:17
@riv the difference is due to different render of fonts in browsers. you should set **height** or **line-height** ; – Arash Hasanzade Mar 05 '18 at 09:20
Inline element can't accept height and it depend on font rendering – Arash Hasanzade Mar 05 '18 at 09:24
Oh my bad, it seems that line-height on inline elements affects the *parent* block element height instead. – riv Mar 05 '18 at 09:27

score 0 · Answer 2 · answered Mar 05 '18 at 09:18

This is a well known problem. It is caused by the fact that Firefox and Chrome use different rendering engines, Gecko and Webkit respectively. Unfortunately there is no 'best' way to fix it.

You can find a few workarounds in this answer and this one.

score 0 · Answer 3 · edited Mar 05 '18 at 09:24

Because of span is inline element, you should re-write your code like following way:

document.querySelectorAll("span").forEach(el => {
  el.textContent = el.offsetHeight + "px";
});

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block; /* Key line */
  vertical-align: top; /* It is recommended when using "display: inline-block"*/
}

<span>Test</span>

score -1 · Answer 4 · answered Mar 05 '18 at 09:16

The reason for that behaviour is that you are using a span which is an inline element. It does not change its container height based on the line height but based on its parent block element. Apparently, Chrome and Firefox have different default styles for that.

Either make the span a block element using display: block or replace it with a block element like div.

score -2 · Answer 5 · answered Mar 05 '18 at 09:15

-2

About the height differences the issue is that you have added font-size, family and line-height as well.

So because of this 3 things :

font-family: Verdana;
font-weight: bold;
line-height: 1.15;

your size of text getting bigger then 16px.

answered Mar 05 '18 at 09:15

KMG

114
7

span height different in Firefox vs Chrome

5 Answers5