HTML 复选框 - 跨浏览器问题答案

【问题标题】：HTML checkbox - cross browser issueHTML 复选框 - 跨浏览器问题
【发布时间】：2014-01-14 08:38:51
【问题描述】：

我有一个输入 - 嵌套在元素中的复选框，它在 FF 和 chrome 中显示正常，但在 IE8/9 中显示不同。下面的嵌套结构是必需的，因为其中还包含许多其他元素，为了清楚起见，我只是将其删除。

HTML：

<div class="fieldwrapper">
    <div class="field">
        <div id="acc">
            <label>
                <input type="checkbox"/>
            </label>
        </div>        
    </div>
</div>

CSS：

.fieldwrapper .field input,
{

    border: 1px solid #41403E;
}

.fieldwrapper .field input[type="checkbox"] 
{
    border: none;
}
#acc label input { border:0 none;}

css 中的前 2 种样式是很久以前在应用程序中编写的，我无法修改它，因为它在 no 中使用。的地方，我只能写新的或修改第三种风格。我希望复选框出现在 IE 中，就像它在 FF 中一样。我试过了，但没有运气，不确定，可能是我遗漏了一些非常简单的东西。因此，如果有人可以提供帮助，将不胜感激。

jsfiddle的IE9截图-

jsfiddle的FF截图-

【问题讨论】：

看起来，如果您删除所有自定义样式，它开始看起来一样 jsfiddle.net/D47jL/2
除非您使用 css/html 替代方案，否则无法保证跨浏览器样式的复选框或单选按钮。
@iambriansreed - 好吧，就我而言，样式非常简单，之前有一个边框，然后删除它，添加了一个样式，我认为应该不会有太大影响
@YuriyGalanter - 正如我所说，我无法删除前两种样式，因此我添加了我自己的第三种样式以删除边框。前两个是很久以前在这个庞大的应用程序中编写的，它们也被用于许多其他地方。
到底是什么问题？您的小提琴确实在 IE9 中看起来与在 Firefox 中相同。

标签： html css internet-explorer checkbox

【解决方案1】：

在 Internet Explorer 9/10/11 中，复选框的外观与在 Blink 和 Gecko 浏览器中的外观不同。没有很好的方法（具有良好的浏览器支持）来设置复选框的样式，但您可以隐藏它们并设置另一个元素的样式以用作复选框。

以下是一些使用“hack”的示例：CSSDECK CSS Checkbox-styles。

【讨论】：

感谢您的链接。但就我而言，我必须只使用默认的。我真的很惊讶它只是 css 的单行，即玩边界，这实际上创造了这样的差异。
据我所知没有 CSS，在 IE 中它们会这样显示？
不，只是这个 css 导致了问题。如果你把这里所有的 css 都去掉，它看起来和 FF 中的一样。
那我会说你可以写一个重置CSS类？查看 IE 用于复选框的 UAS，并使用其样式覆盖现有的。
Reset css 不起作用，它已经存在于我的应用程序中。我尝试使用适用于 IE 的 UAS（来自此站点 - iecss.com），但也没有解决。