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> 

    若有问题请留言!!

  • 相关阅读:
    .net中连接远程目录的解决方案
    VS2008+Window Mobile开发环境的搭建(转)
    安装任何版本ActiveSync都出错原因
    问题让人开始慢慢的思考
    [原创]EasyUI的TreeGrid查询功能实现
    听客户说然后再做开发
    EasyUI的DataGrid合击汇总页脚使用教程
    ASP.NET MVC 使用AderTemplate模板引擎进行视图显示
    C#的JSON数据格式转换方法
    Delphi使用ReportMachine制作小计和总计报表
  • 原文地址:https://www.cnblogs.com/superjt/p/3492706.html
Copyright © 2011-2022 走看看