复选框不会在IE中显示(仅限)

时间:2014-01-16 00:33:58

标签: html css internet-explorer checkbox compatibility

我无法在Internet Explorer中显示我的复选框 它适用于所有其他Web浏览器,但只有IE无法正确显示它 此外它在我的本地计算机文件夹中正常工作,但从网络(NAS)中的文件夹打开时显示无法显示< - 用IE打开

由于工作相关,它需要放在网络上。 我已经使用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>

2 个答案:

答案 0 :(得分:1)

发现Checkbox没有出现的问题 原因是当文件被放置在网络上并使用IE 打开时,它会以某种方式自动将文档模式:更改为“Internet Explorer 7标准”,这不是'当你在本地文件夹上找到文件时发生
因此,通过在代码中添加此行将强制在文档模式下运行:标准

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

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

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

答案 1 :(得分:0)

正如预期的那样,使用IE9及以上版本对我工作正常。你真的需要冲突的doctype和头部声明吗? XML版本声明UTF-8和元标记“charset = windows-1252”如果我们可以提供帮助,我们尽量不要混淆浏览器。