自定义复选框在IE 7和IE 8中不起作用 [英] Custom checkbox not working in IE 7 and IE 8
问题描述
嗨专家！
我在HTML上创建了自定义复选框，这在IE 9，IE 10和其他最新版浏览器上运行良好。但是当我尝试在IE 7和IE 8上运行它时，它无法正常工作。看到图片。我所做的？请帮帮我！
图片
http://i.stack.imgur.com/9mFUY.png [ ^ ]
CSS
。 ckbox
{
width < span class =code-keyword>： 25px;
height < span class =code-keyword>： 25px;
}
。 custom-checkbox
{
position ： relative;
display ： inline-block;
}
。 custom-checkbox > 。 box
{
position ： relative;
display ： block;
width ： 25px;
height ： 25px;
background-color ： ＃E5E5E5;
padding ： 0px;
margin ： 0px;
}
。 custom-checkbox > 。框 > 。 tick
{
position ： < span class =code-keyword>绝对值;
left ： < span class =code-keyword> 4px;
top ： < span class =code-keyword> 7px;
width ： < span class =code-keyword> 14px;
height ： < span class =code-keyword> 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 ： < span class =code-keyword> rotate（-45deg）;
display ： none;
}
。 custom-checkbox > input：checked + 。 box > 。 tick
{
display ： block;
}
。 custom-checkbox > 输入
{
position ： 绝对;
outline ： none;
left ： 0;
< span class =code-attribute> top ： 0;
< span class =code-attribute> padding ： 0;
< span class =code-attribute> width ： 25px;
< span class =code-attribute> height ： 25px;
< span class =code-attribute> border ： none;
< span class =code-attribute> margin ： 0;
< span class =code-attribute> opacity ： 0;
<跨度 class =code-attribute> z-index ： 1;
} Hi Expert! 这篇关于自定义复选框在IE 7和IE 8中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
HTML
< pre lang =HTML> < table 样式 = background-color：＃E5E5E5; >
< tr >
< td >
< span class = custom-checkbox >
< < span class =code-leadattribute> input id = fileItem name = fileItem type = 复选框 class = ckbox value = 1 已检查 = 已选中 / >
< span class = 框 > < span class = tick > < / span > < / span
< / span >
< input id = fileId name = fileId type = 隐藏 < span class =code-attribute> value = / >
< / td >
< td >
< label for = fileItem title = >
检查< / label >
< < span class =code-leadattribute> / td >
< / tr >
< / table > 我有IE 10.我在IE9,8和7中看到了以下页面模式，看不出任何问题。
index.html ：
< style type =text / css>
.ckbox
{
宽度：25px;
身高：25px;
}
.custom-checkbox
{
职位：亲属;
显示：内联块;
}
.custom-checkbox> .box
{
位置：相对;
显示：块;
宽度：25px;
身高：25px;
背景颜色：＃E5E5E5;
填充：0px;
保证金：0px;
}
.custom-checkbox> .box> .tick
{
职位：绝对;
剩余：4px;
top：7px;
宽度：14px;
身高：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）;
显示：无;
}
.custom-checkbox>输入：选中+ .box> .tick
{
display：block;
}
.custom -checkbox>输入
{
职位：绝对;
大纲：无;
左：0;
top：0;
填充：0;
宽度：25px;
身高：25px;
border：none;
margin：0;
opacity：0;
z-index：1;
}
< / style>
< table style =background-color：＃E5E5E5;>
< tr>
< td>
< span class =custom-checkbox>
< input id =fileItem name =fileItemtype =checkboxclass =ckboxvalue =1checked =checked/>
< span class =box>< span class =tick>< / span>< / span>
< / span>
< input id =fileIdname =fileId type =hiddenvalue =/>
< / td>
< td>
< label for =fileItemtitle =>
检查< / label>
< / td>
< / tr>
< / table>
不能使用IE6,7,8
I have created custom check-box on HTML, that''s working fine on IE 9 , IE 10 and other latest version browser. But when I try to run it on IE 7 and IE 8, it not working. see in image. What i do? Please help me!
Image
http://i.stack.imgur.com/9mFUY.png[^]
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: #E5E5E5;
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>
I have IE 10. I saw the following page in IE9, 8 and 7 modes and do not see any issues.
index.html:
<style type="text/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: #E5E5E5;
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;
}
</style>
<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>No its not working with IE6,7,8
