1

Fiddle:

https://jsfiddle.net/so2n0a8s/1/

On FF, the rendered span height is 18px while on chrome it is 16px.

Why the difference and how to have consistent rendering across browsers.

HTML:

<span>Different height span</span>

CSS:

span {
  font-size: 15px;
  line-height: 2;
  box-sizing: border-box;
}

Edit: Removing the line-height and box-sizing properties as they don't seem to any difference at all. https://jsfiddle.net/so2n0a8s/2/

necromancer
  • 19
  • 1
  • 3
  • This might be helpful: http://stackoverflow.com/questions/26082166/firefox-and-chrome-css-differences-element-height-is-different – sol Jan 30 '17 at 13:06
  • It didn't help at all. Can you point to exactly the reason why this is happening. My css is simple i am giving the font size is pixels (not in relative units) and also giving a specific line height. If you inspect the rendered span in the respective browsers, inspectors show the font-size and line-height as 15px and 30px respectively in computed properties. But the rendered span height has a difference of 2px between chrome and firefox. What is causing this difference and how to address this. – necromancer Jan 30 '17 at 13:12
  • See [Inline elements and line-height](http://stackoverflow.com/q/28363186/1529630), CSS does not define what should happen. – Oriol Jan 30 '17 at 13:57
  • @Oriol thanks that was helpful. My question is how do i fix this. How can i ensure consistent (pixel perfect) rendering across browsers. – necromancer Jan 31 '17 at 05:04

0 Answers0