Ошибка размера шрифта в браузере android chrome

Question

У меня проблема с html + css для Android-телефона (моя среда Nexus 5, бета-версия Chrome).

Давайте посмотрим этот CSS:

<style type="text/css"><!-- 
div.sample { 
    margin: 12px 2px 12px 2px; 
} 
div.sample span { 
    padding: 2px 2px 2px 2px; 
    border: 3px solid #f00; 
    background-color: #fcc; 
} 
--></style> 

И часть тела (HTML):

<div class="sample"><span>SAMPLE SAMPLE SAMPLE</span></div> 
<div class="sample"><span><a>SAMPLE SAMPLE SAMPLE</a></span></div> 
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 

"тест тест ..." часть добавляются, чтобы активировать "шрифт разгонный" из WebKit.

Проблема заключается в том, что мы ожидаем, что первый DIV (ОБРАЗЕЦ ...) выглядит так же, как второй DIV (ОБРАЗЕЦ ...), однако, это выглядит следующим образом:

В второй случай div, диапазон не расширяется, чтобы соответствовать его элементу (SAMPLE ...).

Если мы добавим текст вне тега, оба div выглядят одинаково.

<div class="sample"><span>SAMPLE<a>SAMPLE SAMPLE SAMPLE</a></span></div> 

Знаете ли вы, что это проблема? Как я могу это решить?

Большое спасибо!

Answer 1

Вам необходимо установить display имущество от div.sample span до inline-block.
Это позволит обернуть весь контент.
я воспроизвел ваши проблемы здесь - fiddle

Настройка

div.sample span { 
    padding: 2px 2px 2px 2px; 
    border: 3px solid #f00; 
    background-color: #fcc; 
    display:inline-block; 
} 

снимает проблему - fiddle.
Я подозреваю, что это связано с размером шрифта по умолчанию для элемента ссылки, который, вероятно, больше размера шрифта элемента span.