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

【问题标题】：IE9 Checkbox rendering oddity on focusIE9复选框在焦点上呈现奇怪
【发布时间】：2011-09-29 17:53:48
【问题描述】：

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

我有以下 CSS sn-p，我只注意到如果我删除以下所有 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/

【问题讨论】：

同样值得注意的是，单选按钮不会发生这种情况，单选按钮是相似的，并且应用了完全相同的 CSS 规则。

标签： css internet-explorer checkbox

【解决方案1】：

这是邪恶的部分：

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

看来，一旦您进行了此设置，就无法通过分配transparent 或inherit 来撤消。

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

【讨论】：

【解决方案2】：

默认情况下，Internet Explorer 对 HTML 表单使用 Windows 表单控件。这些是标准的，其样式与任何 Windows 应用程序中的样式完全相同...直到您尝试手动对其应用样式。

这可以用一个普通的文本输入来演示。如果您尝试设置background-color 属性，输入元素的整体样式将随之改变，因为Internet Explorer 从标准Windows 表单控件切换到自定义表单控件。为了您的方便，我设置了那个演示 here。

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

【讨论】：

【解决方案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 */
}

【讨论】：

【解决方案4】：

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

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

【讨论】：