css - Android 4 的 HTML5 应用程序中的按钮上不显示文本

Question

我们的团队正在为 iPhone 和 Android 开发 HTML5 应用程序我们使用了 CSS 框架 Gumby 我们遇到了仅在 Android 4.0.3 和 4.0.4 上重现的奇怪问题

此 HTML 代码未在按钮内显示文本“设置”

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

Answer 1

当某些按钮上的文本丢失时，这是 Android 4.0.3 和 4.0.4 上 WebView 的非常奇怪的行为。

我们在我们公司的 Aser 和 LG 手机上发现了这个问题，但 Nexus4、三星 SGS+ 和 iPhone 显示一切正常。

步骤1

这个项目的jade-html代码

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

此项目的基本ccs 代码

.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 步

只需添加到.footercssposition:relative; z-index:102;

哇哈！所有文本都显示，所有 z-indexes 顺序都很好！

最终工作的CSS是

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