复选框不显示在 IE 中（仅）答案

【问题标题】：Checkbox does not display in IE (only)复选框不显示在 IE 中（仅）
【发布时间】：2014-01-17 08:19:56
【问题描述】：

我的复选框无法在 Internet Explorer 中显示。
它适用于所有其他网络浏览器，但只有 IE 无法正确显示。
另外它在我的本地计算机文件夹中确实可以正常工作，但是当它从我在网络 (NAS) 中的文件夹打开时无法显示。

由于工作相关，需要放在网络上。我已经用 Firefox 26.0 和 IE 10.0.9 进行了测试

这是我的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11 DTD/xhtml11.dtd"><html xsi:schemalocation="http://www.w3.org 1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN">

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1252"/>
<style>
input[type=checkbox] {  
display: none;  
}   
.checkbox label:before {  
border-radius: 1px;  
border: 1px solid black
}  
input[type=checkbox]:checked + label:before {  
content: "X";  
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
font-size: 22px;  
color: #000000;  
text-align: center;  
line-height:19px;
border: 1px solid black
}  
label {  
display: inline-block;  
cursor: pointer;  
position: relative;  
padding-left: 25px;  
margin-right: 15px;  
font-size: 16px;  
font-weight: bold;
}  
label:before {  
content: "";  
display: inline-block;  


width: 15px;  
height: 15px;  

margin-right: 10px;  
position: absolute;  
left: 0;  
bottombottom: 1px;  
background-color: #eee;  
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}      
</style>
</head>
<body>
<div class="checkbox"> <input type="checkbox" id="Field1" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteYes" /> <label for="Field1">Yes</label></div>
<div class="checkbox"> <input type="checkbox" id="Field2" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteNo" /> <label for="Field2">No</label> </div>

</body>
</html>

【问题讨论】：

不能在 IE 上运行？ link
在我的 IE (8) 中你可以看到虚假的复选框，但不能点击它们，我认为是因为 IE8 不支持 :checked 选择器

标签： html css internet-explorer checkbox compatibility

【解决方案1】：

找到复选框未显示的问题
根本原因是当文件放在网络上并用 IE 打开时，不知何故它会自动将 Document Mode: 更改为“Internet Explorer 7 标准”，这不是当您在本地文件夹中获取文件时不会发生这种情况。

因此，通过在代码中添加这一行将使其强制在 Document Mode: Standards

下运行

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

有关兼容性的更多详细信息，您可以在以下 URL 中找到它：

https://hsivonen.fi/doctype/#ie8

【讨论】：

【解决方案2】：

正如预期的那样，我在 IE9 及更高版本上运行良好。你真的需要冲突的 doctype 和 head 声明吗？ XML 版本声明 UTF-8 和元标记 "charset=windows-1252" 如果我们能提供帮助，我们尽量不要混淆浏览器。

【讨论】：

删除我可以看到显示了原始复选框（我最初设置为 [display: none]），但我在课堂上设置了一个“X”以显示中的复选框似乎仍然缺失。
我做过这样的事情，发现仅使用图像作为复选框并向其添加单击事件并在单击时将其切换出来要可靠得多。如果它是一种形式，我会随图像一起更改隐藏的形式值。我知道这不是一个很好的解决方案，但它肯定适用于任何地方。
对我来说，图像勾选替代听起来更可靠。我已经尝试了围绕这个问题的许多元素，但我找不到这个兼容性问题的任何原因。非常感谢您的建议，我将围绕图像进行搜索作为复选框解决方案。