IE6中Select覆盖DIV元素各种解决办法

普通的元素，textbox, div, table……这些，属于windowless element，它们之间互相遮盖的情况由z-index决定，在它们之上，是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。

解决办法一：Iframe包裹select元素

 代码如下 复制代码

<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug -->
<select name="country">
<option value="1">china</option>
<option value="2">japanese</option>
<option value="1">U.S.A</option>
</select>
</iframe>

解决办法二：以Iframe作为div的子元素，覆盖select元素

 代码如下 复制代码

.T_iframe
{
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.T_div
{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
<div class="T_div">
<span>这里可以包含其他dom元素</span>
<iframe class="T_iframe"></iframe>
</div>

解决办法三

 代码如下 复制代码

示例程序代码：
//html.select.hack.iframe shim.htm
<html>
<head>
 <script>
  function DivSetVisible(state)
  {
   var DivRef = document.getElementById(‘PopupDiv’);
   var IfrRef = document.getElementById(‘DivShim’);
   if(state)
   {
    DivRef.style.display = “block”;
    IfrRef.style.width = DivRef.offsetWidth;
    IfrRef.style.height = DivRef.offsetHeight;
    IfrRef.style.top = DivRef.style.top;
    IfrRef.style.left = DivRef.style.left;
    IfrRef.style.zIndex = DivRef.style.zIndex – 1;
    IfrRef.style.display = “block”;
   }
   else
   {
    DivRef.style.display = “none”;
    IfrRef.style.display = “none”;
   }
  }
 </script>
</head>
<body background=”/A-A-A/2005/07/17/20050717095153122477_1.gif”>
 <form>
  <select>
   <option>A Select Box is Born ….</option>
  </select>
 </form>
 <div
  id=”PopupDiv”
  style=”position:absolute;font:italic normal bolder 12pt Arial; top:25px; left:50px; padding:4px; display:none; color:#ffff00; z-index:100″>
  …. and a DIV can cover it up<br>through the help of an IFRAME.
 </div>
 <iframe
  id=”DivShim”
  src=”javascript:false;”
  scrolling=”no”
  frameborder=”0″
  style=”position:absolute; top:0px; left:0px; display:none;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);”>
 </iframe>
 <br>
 <br>
  <a href=”#” onclick=”DivSetVisible(true)”>Click to show DIV.</a>
 <br>
 <br>
  <a href=”#” onclick=”DivSetVisible(false)”>Click to hide DIV.</a>
</body>
</html>
时间： 2024-10-11 16:37:25

IE6中Select覆盖DIV元素各种解决办法的相关文章

IE6中float造成margin值双倍解决办法

例1 一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px),那么会自动的加一倍变成30px. 例:  代码如下 复制代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IE6双空白边Bug</title> </head> <body> <div style="

IE6中出现&quot;无法设置selected属性&quot;解决办法

如下代码  代码如下 复制代码 selectObj.val(defaultSelect);//选中指定项 在其它浏览器都是没问题,就是ie6下不行,后来百度了一个 解决办法 就是设置selected属性的时候使用setTimeout函数设定一个时间即可,代码如下:  代码如下 复制代码  var selectObj = document.getElementById('selectId');  // 使用setTimeout之后问题解决  setTimeout(function() {     

jQuery:delegate中select()不起作用的解决方法

 本篇文章只要是对jQuery:delegate中select()不起作用的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery有一个很好用的delegate(事件委派)功能,可以给当前以及将来(动态添加)的元素绑定一个事件处理函数.   比如下面的例子,动态添加一个输入文本框后,我想让所有文本框(不管是不是动态添加的)在获取焦点时,自动转大写.   代码如下: <!doctype html> <html> <head>     <

jquery解决ie6中图片过大导致错位解决方法

jquery解决ie6中图片过大导致错位解决方法 在产品展示页面中用jqurey控制下: /*这个标签调用产品图片*/ <asp教程:image runat="server" id="productbigimg" /> 首先引入jquery <script src="/utility/js/jquery.js" type="text/网页特效"></script> <script ty

AndroidGUI27中findViewById返回null的快速解决办法_Android

 在用Eclipse进行Android的界面开发,通过findViewById试图获取界面元素对象时,该方法有时候返回null,造成这种情况主要有以下两种情形. 第一种情形是最普通的. 比如main.xml如下,其中有一个ListView,其id为lv_contactbook <?xml version="1.0"encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.

AndroidGUI27中findViewById返回null的快速解决办法

在用Eclipse进行Android的界面开发,通过findViewById试图获取界面元素对象时,该方法有时候返回null,造成这种情况主要有以下两种情形. 第一种情形是最普通的. 比如main.xml如下,其中有一个ListView,其id为lv_contactbook <?xml version="1.0"encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.a

ubuntu中laravel提示缺少mcrypt扩展解决办法

mcrypt是一个加密的扩展了,在php中如果要使用此加密就必须安装mcrypt扩展了,下面我们来看看在ubuntu中laravel提示缺少mcrypt扩展解决办法,希望下文对你有帮助. 解决办法. sudo apt-get install php5-mcrypt sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available sudo php5enmod mcrypt service apache2 restart 上面的方法不知

在ASP.net中的UpdatePanel，弹窗失败解决办法

原文:在ASP.net中的UpdatePanel,弹窗失败解决办法 最开始我用: Response.Write("<script>alert('和哈呵呵呵呵呵呵!')</script>"); 在没有UpdatePanel时,这个有效,能够正确弹出提示窗口. 后面,页面改进,加上局部刷新后,该方式失效了.探索出新的方式:   ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(),

IE6下select z-index无效div被遮挡解决办法

解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都要加个iframe吧?所以不推荐!代码如下:  代码如下 复制代码 <iframe style="z-index:1;position: absolute; "><!-- 用iframe 解决此bug -->  <select name=