如何使用 jQuery 从 webkit (Chrome/Safari) 获取正确的偏移顶部值？ Webkit 错误？

发布于 2024-12-15 18:26:52 字数 4073 浏览 4 评论 0原文

我正在编写以编程方式定位 div 以提供滚动外观的代码。使用 Firefox 和 Internet Explorer 时一切正常（信不信由你）。但是，我从 webkit 浏览器（Chrome/Safari）中获取了虚假值。它似乎与元素是否有内容有关。我正在计算空锚元素的位置。 Webkit 似乎仅当元素具有可见内容时才正确。因此，我可以通过在锚点中添加一些内容来解决这个问题。然而，这打乱了我的布局，感觉就像是一个拼凑的东西。另外，如果这确实是我正在处理的问题，我想记录一个错误。下面是一个示例文档来说明该问题。在不同的浏览器中打开它，看看我的意思。非常感谢！ :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>What's Up with Webkit Anchor offset()?</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
    <script type="text/javascript">
        var offsetAlert = function(calledBy){
            var anchor = jQuery("a#anchor");
            var span = jQuery("span#test");
            var subheading = jQuery("span#targetSubHeading");
            if (anchor.length == 1 && span.length == 1 && subheading.length == 1)
            {
                alert("offsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nspan.offset().top=["+span.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
            }

        };

        $(document).ready(function (){offsetAlert("jQuery.ready");});
    </script>
</head>
<body style="background-color:#c6cbd1; margin:0px; padding:0px; border:none;" onload="javascript:offsetAlert('body.onload');">
    <div>
        <a name="top"></a><h2>Heading</h2>
        This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >Internal Links: <a href="#a1">Sub-heading 1</a>, <a href="#a2">Sub-heading 2</a>, <a href="#a3">Sub-heading 3</a>, <a href="#anchor">Target Sub-heading</a>
        <br ><br ><b><a id="a1"></a>Sub-heading 1</b>
        <br >This is the phenomemaly interesting text. 
        <br><a href="#top">top</a>
        <br ><br ><a id="a2"></a><b>Sub-heading 2</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><b><a id="a3"></a>Sub-heading 3</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><span class="anchor" id="test"><a id="anchor"></a></span><span id="targetSubHeading" style="font-weight:bold;">Target Sub-heading</span>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
    </div>
</body>
</html>

好的，这是更新。感谢查尔斯在下面的回答。我更新了我的示例，以说明问题和我根据 Charles 的回答提出的解决方法。这似乎有效，但我仍然想知道是否应该报告这是一个错误。

var offsetAlert = function(calledBy){
    var anchor = jQuery("a#anchor");
    var subheading = jQuery("span#targetSubHeading");
    var displayCss = anchor.css("display");
    anchor.css("display", "block");
    var alteredOffset = anchor.offset();
    anchor.css("display", (displayCss ? displayCss : ""));
    if (anchor.length == 1 && subheading.length == 1)
    {
        alert("displayCss=["+displayCss+"]\nalteredOffset.top=["+alteredOffset.top+"]\noffsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
    }
};

谢谢！

希望这是最后一次更新。我检查了Webkit，没有发现这个bug。所以我添加了一个新的错误和这个问题的链接。希望这会引起一些关注并最终得到解决。这是链接：http://bugs.webkit.org/show_bug.cgi?id=72524

顺便说一句 - 我在这里简单地找到了一个现有错误的链接，但事实证明它是针对 offsetHeight 而不是 offsetTop。

原文

I'm working on code that programmatically positions a div to give the appearance of scrolling. All works fine when using Firefox and Internet Explorer (believe it or not). However, I'm getting bogus values from webkit browsers (Chrome/Safari). It appears to have something to do with whether an element has content. I'm calculating the position of an empty anchor element. Webkit seems to get it right only when the element has visible content. So, I could work around this by having some content in my anchor. However, that messes up my layout and feels like a kludge. Also, I'd like to log a bug, if that is indeed what I'm dealing with. Below is a sample document to illustrate the issue. Open it in the different browsers to see what I mean. Much thanks in advance! :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>What's Up with Webkit Anchor offset()?</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
    <script type="text/javascript">
        var offsetAlert = function(calledBy){
            var anchor = jQuery("a#anchor");
            var span = jQuery("span#test");
            var subheading = jQuery("span#targetSubHeading");
            if (anchor.length == 1 && span.length == 1 && subheading.length == 1)
            {
                alert("offsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nspan.offset().top=["+span.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
            }

        };

        $(document).ready(function (){offsetAlert("jQuery.ready");});
    </script>
</head>
<body style="background-color:#c6cbd1; margin:0px; padding:0px; border:none;" onload="javascript:offsetAlert('body.onload');">
    <div>
        <a name="top"></a><h2>Heading</h2>
        This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >Internal Links: <a href="#a1">Sub-heading 1</a>, <a href="#a2">Sub-heading 2</a>, <a href="#a3">Sub-heading 3</a>, <a href="#anchor">Target Sub-heading</a>
        <br ><br ><b><a id="a1"></a>Sub-heading 1</b>
        <br >This is the phenomemaly interesting text. 
        <br><a href="#top">top</a>
        <br ><br ><a id="a2"></a><b>Sub-heading 2</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><b><a id="a3"></a>Sub-heading 3</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><span class="anchor" id="test"><a id="anchor"></a></span><span id="targetSubHeading" style="font-weight:bold;">Target Sub-heading</span>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
    </div>
</body>
</html>

Okay, here's an update. Thanks to Charles for the answer below. I updated my example to function to illustrate both the problem and the workaround I came up with based on Charles' answer. This seems to work, but I'm still wondering if I should report this is a bug.

var offsetAlert = function(calledBy){
    var anchor = jQuery("a#anchor");
    var subheading = jQuery("span#targetSubHeading");
    var displayCss = anchor.css("display");
    anchor.css("display", "block");
    var alteredOffset = anchor.offset();
    anchor.css("display", (displayCss ? displayCss : ""));
    if (anchor.length == 1 && subheading.length == 1)
    {
        alert("displayCss=["+displayCss+"]\nalteredOffset.top=["+alteredOffset.top+"]\noffsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
    }
};

Thanks!

Here's hopefully the last update. I checked Webkit and didn't find this bug. So I added a new bug and a link to this question. Hopefully, this will get some attention and eventually get fixed. Here's the link: http://bugs.webkit.org/show_bug.cgi?id=72524

BTW - I briefly had on here a link to an existing bug, but it turned out that it was for offsetHeight and not offsetTop.

分享到QQ

分享到微博