How to get rid of excess space in the text height of HTML elements?

Question

Problem:

This is best described using an H2 element. When the height of this element is the key to your design, you will encounter a huge problem. The heights on different devices are different and thus can ruin your design.

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

Try it yourself

I found a way to test it for myself. Just open this link on different devices and you will see that the actual height is different from the same code fragment.

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

Study

- 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/

Answer 1

The problem seems to be in how bold text is implemented in Mobile Safari. This seems to work in both browsers without bold text: http://jsfiddle.net/RwPk7/23/

Bold text is rendered at different heights for each, and combined with the fact that the center text of the browser vertically vertically by default makes a simple solution difficult.

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