4

Problem:

It is best described when using a H2-element. When the height of this element is key to your design you will come across a huge problem. The height is different on multiple devices and thus can really mess up your design.

This is shown in the image below. The black space next to the question mark shows the unwanted "extra space" that appeared on mobile safari.

enter image description here

Try it yourself

I found a way that you can test it for yourself. Just open this link on different devices and you will see that the real height is different with the exact same code snippet.

http://jsfiddle.net/RwPk7/40/

Research

 - MAC Chrome  : 18px 
 - MAC Safari  : 18px
 - MAC Firefox : 17px
 - iPad        : 20px
 - iPhone      : 20px
 - Android     : 19px
 - WIN Chrome  : 18px
 - WIN IE      : 18px

Possible Answer

font-size: 13px; 
line-height: 1.231; // Borrowed from HTML5 Boilerplate

http://jsfiddle.net/RwPk7/45/

Mark
  • 16,906
  • 20
  • 84
  • 117
  • some discussion of this issue here: http://stackoverflow.com/questions/2283383/align-headings-to-same-baseline-regardless-following-text – Ben McCormick Sep 04 '12 at 15:37

1 Answers1

-1

Seems to be an issue of how bold text is implemented in Mobile Safari. This appears to work in both browsers without bold text: http://jsfiddle.net/RwPk7/23/

The bold text is rendered at different heights for each though, and that combined with the fact that browsers center text vertically to line height by default makes a simple universal solution difficult.

So this should be ok if you can live without the bold text.

Ben McCormick
  • 25,260
  • 12
  • 52
  • 71