【问题标题】:IE Standard vs Quirks Handling of offsetLeftIE Standard vs Quirks 对 offsetLeft 的处理
【发布时间】:2013-09-25 02:13:20
【问题描述】:

我们正在修改一个旧的预先存在的网络应用程序,作为其中的一部分,我们已经开始使用 IE10 来查看它。这个应用程序有一个第三方菜单控件(menu9_com.js?),在我们注意到的众多问题中,这个菜单在标准模式下在 IE7+ 上的定位。在 FF、Chrome 或任何带有 Quirks 的 IE 版本中 - 它的位置正确。然而,在标准模式下,它会被推到很远的右侧。

我已将以下函数确定为问题的可能来源。在任何模式下运行,StartLeft 的值开始时大致相同。在工作模式下,它以一个值结束 - 根据定义 - 工作。在破碎模式下,它要高得多。

虽然还不是很清楚,但我相信该函数是从给定的目标位置向上移动 DOM 并添加值以计算它正在添加的菜单元素的“总”偏移量。而且我认为问题归结为 offsetLeft(也许是 offsetParent?)的不同处理方式。所以我试图找到从这个函数中获得一致行为的最佳方法,但对函数的意图不够熟悉,也不熟悉 offsetLeft 等在各种模式下的行为。

函数如下:

function ClcTrgt() {
    var TLoc=Nav4?FLoc.document.layers[TargetLoc]:DomYesFLoc.document.getElementById(TargetLoc):FLoc.document.all[TargetLoc];
    if (DomYes) {
        while (TLoc) {
            StartTop += TLoc.offsetTop;
            StartLeft += TLoc.offsetLeft;
            TLoc = TLoc.offsetParent;
        }
    }
    else {
        StartTop+=Nav4?TLoc.pageY:TLoc.offsetTop;
        StartLeft+=Nav4?TLoc.pageX:TLoc.offsetLeft;
    }
}

有什么建议吗?例如,如果我知道怎么做,我会将此函数转换为使用 jQuery。

更新:
我已将脚本发布到 pastebin

【问题讨论】:

  • 没有什么比看到 1997 年的 Netscape Navigator 4 的支票了。
  • 我认为document.getElementById(TargetLoc) 针对所有使用的浏览器中的元素。但是,您的 coden-p 仅显示您如何计算位置。您还应该展示相关的 HTML 和 CSS,以及您实际使用计算值的方式。 jsFiddle 会很有帮助。
  • CSSOM 中没有任何内容表明 offset* 属性在 quirks 模式下的处理方式不同(与 scroll* 和 client* 属性不同),所以我想知道 StartLeft 的不同值是否是症状,而不是原因。
  • @Alohci 省略单位会有所不同。虽然这可能不是问题,因为 OP 说定位对于其他现代浏览器是正确的......
  • @Teemu - 这不是我阅读问题的方式。 OP 说它的定位在现代浏览器中的怪癖模式是正确的,但不是标准模式。我认为你很可能是对的。无单位长度是我首先要寻找的。​​span>

标签: javascript jquery css internet-explorer


【解决方案1】:

我目前的方向是,在没有对脚本进行实际修复(这可能不值得工作)的情况下,添加此函数以在脚本本身之后运行。我添加了一些标记来促进它,它只需要菜单,并将其放在应有的位置(它与我确定的另一个元素右对齐)。这是从最优的,但它的工作原理。

function fixMenu9() {
    var pTD = $('#pgMenuDivTD');
    var pMN = $('#pgMenuDiv');

    var additionalOffset = ExpYes ? 3 : 0;

    var leftVal = (parseInt(pTD.offset().left) + parseInt(pTD.css('width'))) - (parseInt(pMN.css('width')) + additionalOffset);
    $('#pgMenuDiv').css('left', leftVal);
}

【讨论】:

  • 三个像素“离右边很远”?如果需要,jQuery css 方法也会添加一个默认单位。如果您只是发布更多代码,您可以获得实际修复...
  • @Teemu - 不,3px 是一个调整,它涵盖了在 IE 中计算的偏移量(因此是 ExpYes 条件)与它真正需要的位置之间的微小差异。至于发布更多代码,如果您查看原始问题,它是在 5 小时前使用 pastebin 链接编辑的。
  • 对不起,我没有注意到您的链接...无论如何,似乎有不同的意见在哪些浏览器/模式下代码不起作用。你能解决这个问题吗?您还检查过分配样式的实际代码是否具有单位? Quirks 模式默认使用像素,但在“HTML5”模式下,您必须将单位包含在定位规则中...此外,缩小范围的示例比大量代码更合适:(.
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-03-16
  • 1970-01-01
  • 1970-01-01
  • 2013-10-18
  • 2013-07-30
  • 2023-03-26
  • 1970-01-01
相关资源
最近更新 更多