绿岛网络blog聚合 » SimpleLife » 解决IE6下select遮盖问题

Feeds

1932 items (1932 unread) in 16 feeds

绿岛成员 (310 unread)

• 花瓣笺 (53 unread)
• o2sky (101 unread)
• SimpleLife (12 unread)
• Evil-Voice (18 unread)
• marsfish (19 unread)
• 自留地 (56 unread)
• njzeroc (14 unread)
• 练习曲 (37 unread)

web技术 (88 unread)

• 样式之美 - 《Web标准设计》 (21 unread)
• realazy (19 unread)
• PlanABC - 怿飞’s Blog (48 unread)

杂七杂八 (611 unread)

• 槽边往事 (478 unread)
• 文森特漂流记·漂来又漂去 (72 unread)
• 连岳的第八大洲 (61 unread)

经济观察 (923 unread)

• 牛刀 (712 unread)
• 时寒冰 (211 unread)

SimpleLife

• 12 23, 2008
• 

  解决IE6下select遮盖问题

  Posted: 12 23rd, 2008, 8:08am PST by vsky

  CSS为我们提供了z-index属性来控制DOM元素在浏览器中的层级关系，理论上，我们可以随意设置元素的覆盖关系，但在IE6下，无论我们怎么设置z-index，都无法使用DIV遮挡住select元素，这一Bug困扰了很多前端开发人员。例如之前我做弹出层的时候，在IE6下我不得不将可能出现"冲突"的select元素做额外的隐藏/显示工作，虽然不会影响程序的使用，但细心的用户肯定会觉得这一处理很怪异。

  除了我上面提到的程序主动隐藏"冲突"的select元素的解决方式，我们还可以将显示内容装入到一个iframe中，iframe是可以遮挡住select的。但我个人觉得这样处理比较麻烦，所以多数时候我还是宁愿选择第一种解决方式。但现在有个好消息是，我找到了一种更优雅的方式。首先你可以查看示例（解决IE6下select遮盖问题）。

  上面示例中有两个显示按钮，点击"非JS处理显示"的按钮，我们可以看到我上面描述的IE6下的Bug，DIV被select遮挡了。而点击"JS处理下显示"的按钮，我们可以看到没有被遮挡。

  此解决方式的原理是，在页面创建一个大小、位置和蓝色边框容器一致的空的iframe，并让此iframe的z-idnex位于蓝色边框容器之下。我猜测这可能跟IE6下元素渲染有关系，你可以尝试下将创建的iframe的位置和蓝色容器的位置形成一定的偏差，你会发现只有iframe和蓝色边框容器相交的地方才不会被select遮挡，区域之外的依然被遮挡（你会看到select有一半遮挡，一半不遮挡的奇妙现象）。

  下面提供一个JQ的plugin来完成此操作，如果你不使用JQ，根据上面的原理，自己动手也很容易。

  1. ;(function($){
  2.     $.fn.extend({
  3.         fixZindex : function(options){
  4.             return $(this).each(function(){
  5.                 var $this = $(this);
  6.                 var _this = this;
  7.                 //ie6
  8.                 if($.browser.version=="6.0"&&$.browser.msie){
  9.                     //hide
  10.                     if(options == "hide"){
  11.                         $this.prev("iframe").remove();
  12.                         $this.hide();
  13.                         return;
  14.                     }
  15.                     //show
  16.                     $this.fixZindex("hide");
  17.                     var $iframe = $("<iframe src='about:blank'></iframe>").insertBefore($this);
  18.                     $this.show();
  19.                     var _pos = $this.offset();
  20.                     $iframe.css({
  21.                         width:$this.outerWidth(),
  22.                         height:$this.outerHeight(),
  23.                         position:"absolute",
  24.                         left:_pos.left,
  25.                         top:_pos.top,
  26.                         opacity:0
  27.                     });
  28.                 }
  29.                 //not ie6
  30.                 else {
  31.                     //hide
  32.                     if(options == "hide"){
  33.                         $this.hide();
  34.                         return;
  35.                     }
  36.                     //show
  37.                     $this.show();
  38.                 }
  39.                
  40.             });
  41.         }
  42.     });
  43. })(jQuery);

  PS:flash遮挡DIV的问题并非此bug，可以通过设置flash的wmode属性（opaque或者tansparent），然后就可以通过z-index来控制覆盖关系了。