Question

我创建了一个灯箱脚本。一个javascript问题仍然存在，这让我发疯。

找到来源

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

我认为这是因为IE6还不知道插入图像的尺寸。例如。第一次记录modalHeight它可能是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());
  }

 }

Answer 1

你可以尝试在屏幕外创建你想要大小的元素（即position:absolute; left:-10000px），做你的偏移计算然后再将它移回屏幕。

Answer 2

另一种选择是在图像加载时执行$img.bind("load", ...)设置回调以重绘窗口。但是，当图像已经被缓存时，IE表现得有些奇怪，并且负载回调永远不会触发。你需要做一些像

这样的事情


$img.bind("load", function () {
  redraw();
});

if ($.browser.msie) {
  if ($img[0].complete) {
    redraw();
  }
}

在IE6中渲染之前元素高度未知;怎么解决？

2 个答案: