Chrome上的自定义样式标签/复选框无法点击

Question

我只在Chrome上有一种非常奇怪的行为。我想在过滤器层上设置样式复选框。您可以在http://jsfiddle.net/2wpe0unu/

上找到一个示例

过滤条件是动态的，基于REST调用。它工作得很完美，但有了一些CSS3功能，我无法点击使用标签。为了证明这一点，我在http://jsfiddle.net/3oL5tmfp/1/上创建了一个小提琴，打开图层并尝试单击该复选框。

解决这个问题的一些想法：

1. label没有position: relative; - 它有效，但样式的复选框在空格中丢失
2. ul没有CSS列 - 它可以工作，但我没有列;（
3. 没有transform: translate3d(0,0,0)的图层 - 它可以工作，但我没有任何硬件加速

问题仅发生在Chrome（Mac和Windows）和移动Chrome（Android和iOS）上。它的工作方式与IE10 +，Safari，Mobile Safari和Firefox一样。

对我来说，我已经通过避免层上的transform解决了这个问题（解决方案3），但我想了解这种奇怪的行为。

可能是Chrome引擎的错误吗？欢迎任何建议。

侨 拉尔夫

Answer 1

你的ul add z-index上的

：2;和位置：相对（使z-index工作）似乎解决了你的小提琴中的问题。

还建议在您的内容中添加一个clearfix，因为您说复选框列表将动态填充。