代码之家  ›  专栏  ›  技术社区  ›  Wolfr

元素高度在IE6中呈现之前未知;如何解决?

  •  1
  • Wolfr  · 技术社区  · 16 年前

    我创建了一个lightbox脚本。一个javascript问题仍然存在,这让我抓狂。

    源头在 http://github.com/Wolfr/Wolf-lightbox

    在IE6中,单击图像时,第一次单击模式框时,模式框位置错误。如果关闭它并再次单击它,则模式将正确定位。

    我认为这是因为IE6还不知道插入图像的尺寸。E、 第一次记录模态高度可能是51,下一次是500(模态“增长”了,因为现在有一个图像)。

    有人有什么想法吗?卡在这里!

     function positionBox() {
    
      // initialize object references
      var oElement = $('.modal');
      var oWindow = $(window);
    
      // calculate offset
      var offsetLeft = parseInt((oWindow.width() - oElement.width()) / 2);
      var offsetTop = parseInt((oWindow.height() - oElement.height()) / 2);
    
      var modalWidth = parseInt(oElement.width());
      var modalHeight = parseInt(oElement.height());
    
      oElement.css('left', offsetLeft)
        .css('top', offsetTop)
        .css('width', modalWidth)
        .css('height', modalHeight)
        .css('position', 'fixed');
    
      // IE6 should use position: absolute; since fixed is not supported
      if($.browser.msie && $.browser.version =='6.0') {
       oElement.css('position', 'absolute')
               .css('top', offsetTop + oWindow.scrollTop());
      }
    
     }
    
    2 回复  |  直到 16 年前
        1
  •  3
  •   Richard Marskell - Drackir Sunil Tandon    16 年前

    你可以尝试在屏幕外创建你想要调整大小的元素。 position:absolute; left:-10000px

        2
  •  0
  •   mpdonadio    16 年前

    另一种选择是 $img.bind("load", ...) 设置回调以在加载图像时重新绘制窗口。然而,当图像已经被缓存时,IE的行为有点奇怪,并且加载回调永远不会触发。你需要做些

    
    $img.bind("load", function () {
      redraw();
    });
    
    if ($.browser.msie) {
      if ($img[0].complete) {
        redraw();
      }
    }