zoukankan html css js c++ java

解决IE6下浮层遮盖select刺穿的问题

图一未解决刺穿问题：　　　　　　　　　　　　　　图二已解决

解决方法使用iframe间接挡住层，具体方法见源码

源码一（未解决刺穿）：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/CSS"> 
#warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  
.box { position:absolute; top:0; left:0; width:200px;   
 
height:200px; background:#FDF3D9; border:1px solid #EEAC53}  
.box iframe {width:400px; height:400px; z-index:-1}  
</style> 
</head> 
 
<body> 
<DIV id="warp"> 
  <iframe frameborder="0"></iframe> 
  <DIV class="box">dfsagdsa</DIV> 
</DIV> 
<form id="form1" name="form1" method="post" action=""> 
<label> 
<select name="select" id="select"> 
  <option>测试选项</option> 
  <option>测试选项2</option> 
  <option>测试选项3</option> 
</select> 
</label> 
</form> 
</body> 
</html>

源码2（已解决刺穿问题）

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/CSS"> 
#warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  
.box { position:absolute; top:0; left:0; width:200px;   
 
height:200px; background:#FDF3D9; border:1px solid #EEAC53}  
</style> 
</head> 
 
<body> 
<DIV id="warp"> 
  <DIV class="box">dfsagdsa</DIV> 
</DIV> 
<form id="form1" name="form1" method="post" action=""> 
<label> 
<select name="select" id="select"> 
  <option>测试选项</option> 
  <option>测试选项2</option> 
  <option>测试选项3</option> 
</select> 
</label> 
</form> 
</body> 
</html>

若有问题请留言！！

查看全文

相关阅读:
HTML导航
 html5学习笔记
 crm使用soap启用和停用记录
 crmjs区分窗口是否是高速编辑(2)
关于strace的一点东西
 Android studio第一次使用配置（三）gradle项目构建
 IntelliJ IDEA 问题总结之二（待补充） —— 快捷键、主题样式、导出jar、sqlite
spark之map与flatMap差别
 leetcode:String to Integer (atoi)
oracle索引的操作

原文地址：https://www.cnblogs.com/superjt/p/3492706.html