IE中的jQuery统一无线电/复选框

Question

我在IE 9和8中遇到问题，我的jQuery Uniformed单选按钮和复选框。

出于某种原因，似乎它们堆叠在彼此之上或其他东西上。

我没有要显示的代码，因为没有任何实现超出规范，但你可以在我的实时沙箱上看到一个示例：

http://sandbox.tsdapps.com/account/register

如果你在IE中查看它，int Newsletter部分有两个空白的单选按钮。其中一个已被选中，但似乎是在演示文稿中的空白。 “条款”复选框相同，如果您选中它，则可以看到基础元素被检查，因为复选标记的尖端重叠并且在框的右上角可见。

我到处搜索试图自己解决这个问题，我找不到任何东西。而github问题门户网站有100个未解决的问题，似乎已经死了，所以我在这里。

非常感谢任何帮助。

感谢。

-Vince

Answer 1

尝试使用您的样式和脚本文件，并使用默认的统一设置：

http://jsfiddle.net/AKfN8/2/

在IE中可以正常工作......

所以似乎是Modernizer打破它，这就是我添加它时发生的事情：

http://jsfiddle.net/AKfN8/11/

所以我的猜测是你正在使用可能破坏Uniform的Modernizr HTML5输入标签扩展。您可以尝试删除modernizr进行测试吗？ ：）

如果是，您可能想要在没有输入扩展名的情况下进行构建。

Answer 2

代码在IE8中不能很好地工作，因为IE8（以及据我所知的IE9）不支持:after和:before伪css类。但是你可以通过添加一个特定于IE的css和js文件来实现所需的行为，并且只会在IE浏览器中加载并添加一些额外的代码。

首先只需隐藏用户的checkbox，以避免复选框位于统一范围之上。

#some_holder_dom_node span>input[type='checkbox'] {
  visibility: hidden;
}

隐藏复选框后，我们需要手动处理它的检查/取消选中操作并使用其他元素触发事件，例如：

(function(){
  $(document).on('click', '#some_holder_dom_node div.checker>span', function(){
    $(this).find('input:checkbox').trigger('click');
  });
}());

我使用了简单的JS和CSS，但是您可以使用scss或sass来保存一些css规则的输入以及CoffeeScript或其他来处理JS的东西。