html - “ block 样式”单选按钮适用于除 iPad 以外的所有设备

Question

我有一组单选按钮，并设置了它们的样式，使它们显示: block ，使它们看起来像按钮(也隐藏了单选按钮本身)。这在台式机和 Android 平板电脑上的 Chrome 和 Firefox 中运行良好......但不适用于 iPad。

看这里: http://jsfiddle.net/WhNRK/

无论出于何种原因， block 元素在 iPad 上都不是“事件的”并且不会设置单选按钮。如果我“取消隐藏”单选按钮，您可以看到单击该 block 时它没有被选中。但是，如果我单击实际的单选按钮本身，它会正确选择，甚至会按应有的方式更改 block 元素的背景颜色! http://jsfiddle.net/WhNRK/1/

关于导致这种情况发生的我做错了什么的任何想法？看起来它应该是非常简单的功能，所以我希望它只是一些我忽略的简单的东西......

其中包含的网站的主要用途是用于移动设备，因此绝对需要它在任何 iOS 设备上运行(假设它也可能发生在 iPhone 上，只是我身边没有这样的设备)立即测试)。

感谢您提出任何建议!

Answer 1

首先，您的 fiddle 确实在 iPhone 上也不起作用，无论是在 safari 还是 chrome 中。

虽然我很好奇，但我尝试通过尝试一下您的代码来找到解决方案。稍微更改了 html 以使标签成为输入的同级，而不是父级。仍然对我的 iPhone 没有影响。

谷歌搜索后我发现了这个:http://forums.macrumors.com/showthread.php?t=785632我尝试了解决方案，它似乎有效，尽管我不知道为什么。我想这是某种错误...

您必须将 onclick="" 添加到您的标签中。

我没有在 iPad 上测试它，但由于它只是一个大 iPhone，它应该可以正常工作。可以在此处找到一个工作示例:http://jsfiddle.net/WhNRK/15/