我在HTML上创建了自定义复选框,它在IE 9,IE 10和其他最新版本的浏览器上运行良好。但是当我尝试在IE 7和IE 8上运行它时,它无法正常工作。看到图片。我所做的?请帮帮我!
我的CSS和HTML代码如下所示
CSS
.ckbox
{
width: 25px;
height: 25px;
}
.custom-checkbox
{
position: relative;
display: inline-block;
}
.custom-checkbox > .box
{
position: relative;
display: block;
width: 25px;
height: 25px;
background-color: #FFF;
padding: 0px;
margin: 0px;
}
.custom-checkbox > .box > .tick
{
position: absolute;
left: 4px;
top: 7px;
width: 14px;
height: 6px;
border-bottom: 4px solid #000;
border-left: 4px solid #000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: none;
}
.custom-checkbox > input:checked + .box > .tick
{
display: block;
}
.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 1;
}
HTML
<table style="background-color: #E5E5E5;">
<tr>
<td>
<span class="custom-checkbox">
<input id="fileItem" name="fileItem" type="checkbox" class="ckbox" value="1" checked="checked" />
<span class="box"><span class="tick"></span></span>
</span>
<input id="fileId" name="fileId" type="hidden" value="" />
</td>
<td>
<label for="fileItem" title="">
Check</label>
</td>
</tr>
</table>
答案 0 :(得分:1)
正如Adrift和Matthew指出的那样,你所包含的许多风格都不适用于ie7&amp; 8.在我看来,对于大多数应用来说没问题,因为它们仍然有用,人们不应该使用ie7&amp; 8无论如何。
如果您需要它可以工作,但是,您可以使用javascript方法:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/