Question

我有以下设置（在一个狭窄的窗口中查看，<750px宽）：http://codepen.io/darrylhein/pen/oFalc

问题是导航的隐藏/显示在Android的默认浏览器中不起作用。它似乎在其他任何地方都有效。（它在Android上的Firefox中有效。）

基本上我正在使用input:checked ~ .class { height: 16em; }来显示导航。

我已尝试删除转换和其他各种内容，但它似乎无法正常工作。

有什么想法吗？

我想避免使用JS，但如果我必须这样做。

Answer 1

所以，解决方案的两个部分：

1）问题出现在Android＆lt; 4.1.2上。解决方案是在正文上添加假动画：

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { 
    from { padding:0; }
    to { padding:0; }
}

2）iOS＆lt; 6上也存在标签不检查复选框的问题。解决方案是向onclick添加label：

<label for="checkbox" onclick>Menu</label>