记事本

通常的情况下，IE6中的select元素永远是在最上面的，即使覆盖在它上面的元素的z-index再大也不起作用。比如说有个id为div1的元素绝对定位在select元素的上面。这里假设div1的z-index比select的大，但在IE6里看上去还是select在上面，div1并不能覆盖住它。为了解决这个问题，只能在div1和select中间插入一个和div1的位置以及大小一样的iframe来达到覆盖select的效果。

网上有个叫bgiframe的jQuery插件可以达到这个效果。拿上面的例子来说，它动态的在div1里插入一个透明的iframe，iframe的尺寸是用IE特有的CSS expression计算的，这么做的好处在于iframe随时都可以保持和div1同样大小，缺点是CSS expression太占资源了，可能会导致浏览器假死，如果覆盖在select上的元素的尺寸在运行时不会改变的话，就没必要用CSS expression。所以把bgiframe的代码改了一下。

改过之后的代码，记录一下：

(function($){
  $.fn.bgIframe = $.fn.bgiframe = function(s) {
    if ($.browser.msie && /6.0/.test(navigator.userAgent)) {
      s = $.extend({
        top    : 'auto',
        left    : 'auto',
        width   : 'auto',
        height  : 'auto',
        src     : 'javascript:false;'
      }, s || {});
      var prop = function(n) {
        return n&&n.constructor==Number?n+'px':n;
      };
      return this.each(function() {
        if ( $('> iframe.bgiframe', this).length == 0 ) {
          var iframe = $('<iframe frameborder="0" tabindex="-1"></iframe>')
          .addClass("bgiframe")
          .css({
            display: 'block',
            position: 'absolute',
            zIndex: '-1',
            opacity: 0,
            top: s.top === 'auto'?
              ((this.clientTop || 0)*-1 + 'px'): prop(s.top),
            left: s.left === 'auto'?
              ((this.clientLeft || 0)*-1 + 'px'): prop(s.left),
            width: s.width === 'auto'?
              (this.offsetWidth + 'px'): prop(s.width),
            height: s.height === 'auto'?
              (this.offsetHeight + 'px'): prop(s.height)
          })
          .insertBefore(this.firstChild);
        }
      });
    }
    return this;
  };
})(jQuery);