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

时间：2024-03-21 16:07:20
图一未解决刺穿问题：　　　　　　　　　　　　　　图二已解决
解决IE6下浮层遮盖select刺穿的问题                   解决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>

若有问题请留言！！

相关文章