【IE6的疯狂之五】div遮盖select的解决方案

IE6以及一下版本下,选择框Select会覆盖Div中的内容
一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可,不用修改其他内容。
例如:http://www.css88.com/demo/div_select/div_select.html

CSS代码

  body { margin: 0; padding: 0; text-align: center; background-color: #eee; }

  #bd { margin: 20px auto; padding: 5px 20px 20px; border: 1px solid #bbb; width: 760px; background-color:#9CCE2E;  }             #popup {width: 300px;height: 100px;padding: 10px;position: absolute;left: 443px;top: 57px;border: 1px solid blue;background-color: #fff;filter:alpha(opacity=60);opacity:0.4;}       #popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}

尤其注意这个样式:

#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}

XML/HTML代码

  

<div id="bd">
  <h1>IE6下div遮盖select的解决方案</h1>
    <div class="parameter">

      <label for="ddTest">Test</label>
      <select id="ddTest">
        <option>…</option>
        <option>pick me</option>
      </select>
    </div>
  </div>
  <div id="popup">
    Is the select element poking through?
    <!–[if lte IE 6.5]><iframe></iframe><![endif]–>
  </div>

转载注明:http://www.css88.com/article.asp?id=503
注意:<!–[if lte IE 6.5]><iframe></iframe><![endif]–>:表示在IE6下显示<iframe></iframe>,但是我们从样式中可以看出这个iframe是看不到的;
目前存在的bug:IE6下下拉框(select)看不到。

转载请注明转自《【IE6的疯狂之五】div遮盖select的解决方案

上一篇:计算机术语install和setup的区别


下一篇:Mysql数据库的通用安装方法