为什么IE9中的单选按钮和复选框太小了？

Question

这是IE9中Bootstrap的截图，但这似乎是默认设置。我不明白为什么这些控件太小了。

在IE6到IE8中，它们更大，因此更易于点击。

任何关于使用CSS使它们变大的建议都表示赞赏。

Answer 1

我遇到了与复选框相同的问题。我们使用bootstrap.css并且有规则

input {
    box-sizing: border-box;
}

在我的案例中导致了这个问题。所以我在我的复选框中添加了以下样式，它解决了问题：

.my-class input {
    box-sizing: content-box;
}

希望它会对某人有所帮助。

Answer 2

您可以借助缩放功能调整单选按钮和复选框的大小。

CSS代码：

input[type=radio],input[type=checkbox] { 
-ms-transform:scale(2,2);
transform: scale(2, 2); 
-moz-transform: scale(2, 2); 
-webkit-transform: scale(2, 2); 
-o-transform: scale(2, 2); 
}

示例JS Fiddle

Answer 3

复选框/广播组...通常无法在跨浏览器支持中调整大小..没有快速使用它们...我记得这总是一个痛苦的### ..

我个人建议为他们找一个替换元素，这就是为什么有那么多包支持它们的图形版本的原因。

虽然在某些情况下使用转换/高度/宽度会有效...但您仍然会遇到某些浏览器无法调整它们的问题。所以可能是您的页面规模通常较大，但无法扩展。

理想情况下不是一个好的答案，但这取决于过去的经验。

Answer 4

到目前为止找到的解决方案都没有在IE9中工作。我终于找到了\ ; hack的提及并试了一下。的Presto！

/* IE9 */
:root input#my-checkbox {
    width:20px !important \ ;
    height:20px !important \ ;
    box-sizing:content-box !important \ ;
}

这也可能会影响IE8中的复选框？ IE10？但无论如何我们都有单独的条件。