ie10 【bug】元素使用position:absolute后不能点击
2017-07-05 10:47
435 查看
问题描述:
现有一个i标签模拟checkbox复选框的样式,后紧跟span标签里面显示文字,在这两个标签之上定为(position:absolute)一个input复选框(不可见),点击input时 i标签和变span换样式,但是再点击时,再i标签和span标签上不能选中;代码如下:
div{
position:relative;
}
i{
display:inline-block;
width:20px;
height:20px;
border:1px solid #eee;
}
span{
display:inline-block;
height:20px;
width:50px;
line-height:20px;
color:#595959;
}
input{
height:20px;
width:70px;
position:absolute;
visibility:hidden;
}
html:
<div>
<input type="checkbox">
<i></i><span>文字</span>
</div>
现点击一下input后能触发i标签变化,但是之后就不能点击了。‘
经查找,发现是在ie10,9,8,7下用position:absolute后得用background属性,所以在input css上
background-color:#000;
filter:alpha(opacity=0);
opacity:0;
具体原因不清楚,可能是ie的bug吧
现有一个i标签模拟checkbox复选框的样式,后紧跟span标签里面显示文字,在这两个标签之上定为(position:absolute)一个input复选框(不可见),点击input时 i标签和变span换样式,但是再点击时,再i标签和span标签上不能选中;代码如下:
div{
position:relative;
}
i{
display:inline-block;
width:20px;
height:20px;
border:1px solid #eee;
}
span{
display:inline-block;
height:20px;
width:50px;
line-height:20px;
color:#595959;
}
input{
height:20px;
width:70px;
position:absolute;
visibility:hidden;
}
html:
<div>
<input type="checkbox">
<i></i><span>文字</span>
</div>
现点击一下input后能触发i标签变化,但是之后就不能点击了。‘
经查找,发现是在ie10,9,8,7下用position:absolute后得用background属性,所以在input css上
background-color:#000;
filter:alpha(opacity=0);
opacity:0;
具体原因不清楚,可能是ie的bug吧
相关文章推荐
- IE下当a标签使用position:absolute绝对定位时没有点击区域的bug
- 解决ie下a标签设置为position:absolute不能点击
- a标签position为absolute时,IE无法点击(a position:absolute bug ie)
- IE6下与float元素相邻的position:absolute元素消失BUG
- 【IE6的疯狂系列之十三】IE6下使用滤镜后链接不能点击的BUG
- IE6下使用滤镜后链接不能点击的BUG
- IE6 下父级(relative)使用padding后,子元素绝对定位(absolute)的bug
- 元素的position:absolute;属性和margin-left:480px; margin-top:-20px配合使用
- IE6下与float元素相邻的position:absolute元素消失BUG
- IE6下position:absolute相邻元素margin-top失效的bug
- a标签position为absolute时,IE无法点击(a position:absolute bug ie)
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法
- Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法 分类: ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏
- 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG
- IE6下使用滤镜后链接不能点击的BUG
- 【兼容ie6笔记】当li为父级元素,子级元素使用了position:absolute,并用left定位时
- CSS定位中Position的absolute、 Relative使用细节
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG
- ie6使用绝对定位position:absolute,box不显示