特殊的单选按钮不能在Internet Explorer 11上工作

Question

我正在尝试实现单选按钮，我将它们设置为样式，这样按钮本身就不会显示出来。 这适用于除了Internet Explorer之外我尝试的任何其他浏览器。

.img > input[type=radio]{
display:none;
}

input[type=radio] + img{
cursor:pointer;
border:2px solid transparent;
}
input[type=radio]:checked + img{
border:2px solid #f00;
}

只有当我停止使用display：none代码隐藏单选按钮时，上述代码才能与Internet Explorer一起使用。然后下面的样式被应用，我的jquery代码的其余部分也可以工作。但是，如果display：none为“active”且单选按钮未显示，则Internet Explorer将不会应用下面的其他样式，并且我的jquery代码也不会执行。

有关如何解决此问题的任何想法？提前谢谢。

Answer 1

在IE中，将显示一个带display：none的单选按钮。您需要做的是通过指定以下内容将单选按钮元素放在屏幕上：

left: -9999px
position: absolute (or relative depending on your layout)

而不是：

display:none

Answer 2

我发现如果我更换

display: none;

使用以下代码（下面的代码），文本字段仍允许选择而不显示单选按钮。

border:none;
width:0%;
height:0%;
font-size:0%;