текст не отображается на кнопках в HTML5 приложение для Android 4

Question

Наша команда разрабатывает HTML5 приложение для iPhone и Android Мы использовали рамки CSS Gumby Мы испытали странный вопрос, который был воспроизведен только на Android 4.0.3 и 4.0.4

Этот HTML-код не отображался текст внутри «Настройки» кнопки

<div class="large btn secondary"> 
    <a href="#/settings">Settings</a> 
</div> 

Answer 1

Это очень странное поведение WebView на Android 4.0.3 и 4.0.4, когда текст на некоторых кнопок отсутствует.

Мы нашли эту проблему на телефонах Aser и LG в нашей компании, но Nexus4, Samsung SGS + и iPhone показывают все правильно.

Шаг 1

код нефрита HTML для этого проекта

.mainscreen 
    .btn Button 1 
    .btn Button 2 
    .btn Button 3 
.footer 
    .bottomMenu 
    .btn SomeButton 1 
    .btn SomeButton 2 
    .btn SomeButton 3 

основной код к.х.н. для этого проекта

.btn a { 
    position: relative; // it's necessary for icons 
} 
.bottomMenu { 
    position: fixed; z-index: 100; // it's necessary for layout 
    bottom: 0; 
} 

На шаге 1 мы описали проблему : скрытые шрифты/текст на кнопках в .mainscreen и все в порядке с кнопками в .bottomMenu

Шаг 2

Когда мы добавим к z-index:101.mainscreen .btn a - волшебство! Весь текст вернулся!

Но теперь .mainscreen .btn a заштукатуривать фиксируется в нижней части экрана .bottomMenu

Шаг 3

Просто добавьте .footer CSS position:relative; z-index:102;

Ого-ха! Весь текст отображается, и весь порядок z-индексов в порядке!

Final работал КСС

.btn a { 
    position: relative; z-index:101; 
} 
.footer { 
    position:relative; z-index:102; 
} 
.bottomMenu { 
    position: fixed; z-index: 100; 
    bottom: 0; 
}