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

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

CSS代码
  1. body?{?margin:?0;?padding:?0;?text-align😕center;?background-color😕#eee;?} ??
  2. #bd?{?margin😕20px?auto;?padding😕5px?20px?20px;?border😕1px?solid?#bbb;?width😕760px;?background-color:#9CCE2E;??} ??
  3. #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;} ??
  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代码
  1. <div?id=“bd”>??
  2. <h1>IE6下div遮盖select的解决方案</h1>??
  3. <div?class=“parameter”>??
  4. <label?for=“ddTest”>Test</label>??
  5. <select?id=“ddTest”>??
  6. <option></option>??
  7. <option>pick?me</option>??
  8. </select>??
  9. </div>??
  10. </div>??
  11. <div?id=“popup”>??
  12. Is?the?select?element?poking?through? ??
  13. <!–[if?lte?IE?6.5]><iframe></iframe><![endif]–>??
  14. </div>??

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【IE6的疯狂之五】div遮盖select的解决方案

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    IE6还是穿透呀~

    Kaven10年前 (2009-06-26)回复
  2. #-48

    请楼主发表东西的时候先验证一下

    前端开发9年前 (2010-04-22)回复
  3. #-47

    抱歉 这个真的可以 我刚刚没测试好

    前端开发9年前 (2010-04-22)回复
  4. #-46

    https://www.html.cn/demo/div_select/div_select.html 把这个页面的代码下载后测试成功。但是滑动竖线滚动条select又出来了。这是为什么呢?

    rayniki7年前 (2011-09-06)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏