“Block Style”单选按钮在iPad上无法正常工作

Question

我有一组单选按钮，并将其样式设置为display:block，以便它们看起来像按钮（还隐藏了单选按钮本身）。这在Chrome和Firefox的桌面版和Android平板电脑上运行良好...但在iPad上无法正常工作。

在这里查看： http://jsfiddle.net/WhNRK/ 由于某种原因，在iPad上块元素不是“活动的”，并且不会设置单选按钮。如果我“取消隐藏”单选按钮，您可以看到在点击块时它不会被选择。但是，如果我点击实际的单选按钮本身，则会正确选择它并甚至更改块元素的背景颜色！ http://jsfiddle.net/WhNRK/1/ 您有什么想法，我做错了什么导致出现这种情况？似乎应该是相当直接的功能，所以我希望只是我忽略了一些简单的东西...

这个网站的主要用途是为移动设备设计的，因此一定需要在任何iOS设备上运行（假设它可能也会在iPhone上发生问题，只是我现在没有一个来测试）。

感谢您提出的任何建议！

- Mark

Answer 1

首先，您的jsfiddle在iPhone上也无法使用，无论是在safari还是chrome中。

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

经过一番搜索，我找到了这个链接：http://forums.macrumors.com/showthread.php?t=785632。我尝试了这个解决方案，它似乎可以工作，虽然我不知道原因。我想这可能是某种bug...。

您需要在标签中添加 onclick="" 。这是一个有效的例子：http://jsfiddle.net/WhNRK/15/。

我没有在iPad上测试过，但由于它只是一个大型iPhone，它应该是相同的。

- Pevara

---

@PeterVR--非常感谢你...我已经将它实现到我的代码中，而且完美地运行。我曾在另一个论坛上看到过“假”的onclick建议，并尝试了一下，但没有成功...但我把它放到了input标签而不是label标签中，所以显然有所不同（而且你布置的标签方式更合理）。多么奇怪啊！非常感谢你花费的时间来解决这个问题——对我非常有用，希望将来对其他人也有价值。再次感谢！！！ - Mark

奇怪的错误，但你的解决方法解决了它！虽然对于iOS 6不需要，但只有使用iOS 5（以及可能是旧版本）的旧设备需要它。在iPad 1和3上进行了测试。 - Jörn Berkefeld