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，Samsung 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步

只需添加到.footer css position:relative; z-index:102;

即可

喔-HA！显示所有文本，所有z-index顺序都很好！

最终工作的CSS

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

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

1 个答案: