我有以下设置(在窄窗口中查看,<750px 宽):http ://codepen.io/darrylhein/pen/oFalc
问题是导航的隐藏/显示在 Android 的默认浏览器中不起作用。它似乎在其他任何地方都有效。(它确实适用于 Android 上的 Firefox。)
基本上我input:checked ~ .class { height: 16em; }用来显示导航。
我试过删除过渡和其他各种东西,但它似乎不起作用。
有任何想法吗?
我想避免使用 JS,但如果必须,我会的。
我有以下设置(在窄窗口中查看,<750px 宽):http ://codepen.io/darrylhein/pen/oFalc
问题是导航的隐藏/显示在 Android 的默认浏览器中不起作用。它似乎在其他任何地方都有效。(它确实适用于 Android 上的 Firefox。)
基本上我input:checked ~ .class { height: 16em; }用来显示导航。
我试过删除过渡和其他各种东西,但它似乎不起作用。
有任何想法吗?
我想避免使用 JS,但如果必须,我会的。
因此,解决方案有 2 个部分:
1) Android <4.1.2 出现问题。解决方案是在 body 上添加一个假动画:
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {
from { padding:0; }
to { padding:0; }
}
2) iOS <6 上还有一个问题,标签不选中复选框。解决方案是将一个添加onclick到label:
<label for="checkbox" onclick>Menu</label>
我在这里找到了解决方案:http: //timpietrusky.com/advanced-checkbox-hack
我还更新了 codepen:http ://codepen.io/darrylhein/pen/oFalc