top

Vertical displacement of some parts of text

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Different vertical alignment due to different interpretation of line-height style on 2012 platform

When line-height of some element is set to 0%, the element layout varies between different platform browsers.

Source Files

Note

The files needed for the sample application are here.

Webkit 2012

The text is displayed immediately, regardless of padding settings.

Maple 2010-2011

The text is arranged at the correct postition, and displayed after that.

Solution

The line-height should be set to 1, so the style could be processed the same in all browsers.

Bad example

<div style="width: 126px; height: 22px; padding-top: 8px; font-size: 16px; line-height: 0%; background-color: #f00;">
        Sample text
</div>

Good example

<div style="width: 126px; height: 22px; padding-top: 8px; font-size: 16px; line-height: 1; background-color: #f00;">
        Sample text
</div>