使用复选框来显示导航（内容）不会在Android上工作 [英] Using checkbox to show nav (content) doesn't work on Android

问题描述

我有以下设置（视图在一个狭窄的窗口，＆LT; 750px宽）： HTTP ：//$c$cpen.io/darrylhein/pen/oFalc

I have the following setup (view in a narrow window, <750px wide): http://codepen.io/darrylhein/pen/oFalc

问题是，导航的隐藏/显示不Android的默认浏览器。它似乎工作pretty其他任何地方。 （它不工作在Firefox Android上。）

The problem is that the hide/show of the navigation doesn't work in Android's default browser. It seems to work pretty much everywhere else. (It does work in Firefox on Android.)

基本上我用输入：检查〜{的.class高度：16em; } 显示导航。

我试图消除过渡和各种其他的东西，它似乎并没有工作。

I've tried removing the transition and a variety of other things and it doesn't seem to work.

任何想法？

我想避免使用JS，但如果我有我会的。

I'd like to avoid using JS, but if I have to I will.

推荐答案

所以，2份到解决方案：

So, 2 parts to the solution:

1）在Android＆LT，会出现问题; 4.1.2。解决的办法是在主体中添加了假动画：

1) The problem occurs on Android <4.1.2. The solution is to add a fake animation on the body:

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

2）也有在iOS℃的问题; 6，其中标签不勾选复选框。解决的办法是增加一个的onclick 到标签：

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

我找到了解决方案，在这里： http://timpietrusky.com/advanced-checkbox-hack

我也更新了codePEN：的http：// codePEN .IO / darrylhein /笔/ oFalc

I've also updated the codepen: http://codepen.io/darrylhein/pen/oFalc

这篇关于使用复选框来显示导航（内容）不会在Android上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！