注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

textarea在IE6和IE7下存在的遮挡问题  

2013-05-28 16:26:52|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如果你看到这篇文章,说明你也出现了这类问题,主要原因是定位元素,还有IE的标签层级权限问题引起的,到目前的IE10也存在这个问题。

问题:在IE6、7、10里,如果给textarea的上级标签添加了postion:relative 定位元素的话,textarea就会变的高级,不能被DIV等标签遮挡。

简单的解决方法:把在textarea的上级标签的定位元素删除,也就是postion:relative删除。
复杂的解决方法:在定位层底部添加一个iframe,这种方法能同时解除select、textarea标签的遮挡问题,在IE6、7、10下iframe能遮挡住textarea、select这些标签,而DIV能遮挡住iframe标签。下面是设置iframe标签层级关系的样式:

.box{position:relative;z-index:10000;}		// 父层
.box .cont{background-color:#FFF;zoom:1}	// 显示层
.box iframe{position:absolute;top:0;left:0;z-index:-1;border-width:0;}	// iframe遮挡层,宽度需要根据显示层来定义。

标签的写法:

<div class="box">

<div class="cont">显示的内容</div>

<iframe></iframe>

</div>

小提示:如果还有出现浮层遮挡情况,那就是浮层中的元素覆盖的区域设置了postion:relative的元素,在IE7中浮层就有可能无法遮挡这些元素。

解决方法: 

将浮层的父元素加上z-index即可。

如需转载,请注明出处。
  评论这张
 
阅读(653)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017