IE9复选框在焦点上呈现奇怪

Question

检查屏幕截图.您会注意到具有焦点的复选框实际上与其他复选框的呈现方式不同.什么会让它在IE9中出现？

我有以下CSS片段,我只注意到如果我删除以下所有CSS这个问题不再发生.但是,如果我只删除这些规则中的任何一个或两个,它仍然会发生.我很困惑.

textarea:active,
textarea:focus,
textarea:active:hover,
textarea:focus:hover,
select:active,
select:focus,
select:active:hover,
select:focus:hover,
input:active,
input:focus,
input:active:hover,
input:focus:hover{
    background-color:#f9f9f5;
    border-color:#658cae;
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;

    z-index:1;/* for Opera */
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="file"][disabled],
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="radio"][disabled],
input[type="checkbox"]:focus,
input[type="checkbox"]:active,
input[type="checkbox"][disabled]{
    background-color:transparent;
}

这是一个现场演示:http://jsfiddle.net/QRzRw/1/

Answer 1

这是邪恶的部分:

input:focus,
input:active:hover,
input:focus:hover{
  background-color:#f9f9f5;
  border-color:#658cae;
}

看来,一旦你进行了这个设置,它就无法通过分配transparent或来取消inherit.

看起来您必须为所有input[type=...]标签添加这些样式,但类型复选框除外.

Answer 2

默认情况下,Internet Explorer使用Windows窗体控件来表示HTML表单.这些是标准的,风格与在任何Windows应用程序中完全相同......直到您尝试手动将样式应用于它们.

这可以通过普通的文本输入来演示.如果尝试设置background-color属性,则input元素的整体样式将随之更改,因为Internet Explorer从标准Windows窗体控件切换到自定义窗体控件.为方便起见,我在这里设置了这个演示.

其他版本的Internet Explorer的行为方式相同.一种可能的解决方法是使用Paul Irish的条件CSS类等方法将CSS定位到非IE浏览器.