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属性，则输入元素的整体样式将随之更改，因为Internet Explorer从标准Windows窗体控件切换到自定义窗体控件。为方便起见，我设置了该演示here。

其他版本的Internet Explorer的行为方式相同。一种可能的解决方法是使用Paul Irish's conditional CSS classes之类的方法将CSS定位到非IE浏览器。

Answer 3

一位朋友帮我解决了这个问题，他发现在复选框上设置边框或背景颜色会导致它像某些奇怪的原因那样渲染。

NGLN是正确的，我会接受他的回答。我必须将我的CSS更改为以下内容才能使用：

textarea,
select,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"]{
    font-family:'ColaborateRegular';
    background-color:#efefeb;
    border:1px solid;
    border-color:#89969f #89969f #cbcbc8 #89969f;
    outline: 0;
    padding:3px;
    width: 100%;
    margin-bottom:10px;

    -webkit-box-shadow:inset 0 1px 2px #b8b7b3;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3;
    box-shadow:inset 0 1px 2px #b8b7b3;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -webkit-appearance: none;

    -webkit-transition:background-color 0.4s, border-color 0.4s;
    -moz-transition:background-color 0.4s, border-color 0.4s;
    -ms-transition:background-color 0.4s, border-color 0.4s;
    -o-transition:background-color 0.4s, border-color 0.4s;
    transition:background-color 0.4s, border-color 0.4s;
}
input[type="radio"],
input[type="checkbox"]{
    margin:0 2px 0 0;
}
textarea:hover,
select:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover{
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
}
textarea:active,
textarea:focus,
textarea:active:hover,
textarea:focus:hover,
select:active,
select:focus,
select:active:hover,
select:focus:hover,
input[type="email"]:active,
input[type="email"]:focus,
input[type="email"]:active:hover,
input[type="email"]:focus:hover,
input[type="number"]:active,
input[type="number"]:focus,
input[type="number"]:active:hover,
input[type="number"]:focus:hover,
input[type="password"]:active,
input[type="password"]:focus,
input[type="password"]:active:hover,
input[type="password"]:focus:hover,
input[type="search"]:active,
input[type="search"]:focus,
input[type="search"]:active:hover,
input[type="search"]:focus:hover,
input[type="tel"]:active,
input[type="tel"]:focus,
input[type="tel"]:active:hover,
input[type="tel"]:focus:hover,
input[type="text"]:active,
input[type="text"]:focus,
input[type="text"]:active:hover,
input[type="text"]: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 */
}

Answer 4

我知道这已经得到了解答，但我相信我有更好的解决方案。我似乎在IE 8 + 9中得到了相同的

<!--[if gte IE 8]>
<style type="text/css">
input[type="checkbox"] {
     outline:0;border:0;
}
</style>
<![endif]-->