获取 css :pseudo-elements 的点击
我正在尝试制作一个自定义复选框，所以我做了类似的事情： http://jsfiddle.net/wQdUn /2/
问题是，在基于 WebKit 的浏览器上，仅当单击 的内容（而不是框本身）时才会切换复选框，而在 Firefox 中我得到我期望的行为。
所以我有两个问题：
- 哪一种是正确的行为（即符合规范的行为）？
- 如何在两个浏览器（以及其他浏览器......）中获得我想要的结果？
谢谢。
I'm trying to make a custom checkbox, so I made something like that : http://jsfiddle.net/wQdUn/2/
The problem is that, on WebKit based browsers, the checkbox is toggled only when clicking on the content of the <span>, not on the box itself, while in Firefox I get the behavior I expect.
So I have two questions:
- Which one is the right behavior (i.e. the one conform to specifications)?
- How do I get the result I want in both browsers (and others...)?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不确定第一个问题，但如果您也将
span设为内联块，那么它将在 WebKit 浏览器中按照您的预期工作。请参阅http://jsfiddle.net/wQdUn/5Not sure about the first question, but if you make the
spanan inline block too, it'll work as you expect in WebKit browsers. See http://jsfiddle.net/wQdUn/5对于那些从google来到这个主题的人：
Safari 6.0.4(8536.29.13)仍然遇到这个问题，你需要在伪元素上设置
inline-block才能使点击起作用。Chrome 切换到 Blink 作为渲染引擎，因此这个问题在 chrome 上不再发生（26.0.1410.65）。
For those who come to this topic form google:
Safari 6.0.4(8536.29.13) still got this problem, you need to set
inline-blockon pseudo-element to make click work.Chrome switched to Blink as it's rendering engine, so this problem didn't happen on chrome any more(26.0.1410.65).