Question

我正在编写代码，以编程方式定位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的回答如下。我根据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。所以我添加了一个新的bug和这个问题的链接。希望这会得到一些关注并最终得到修复。这是链接：http://bugs.webkit.org/show_bug.cgi?id=72524

BTW - 我在这里简要介绍了一个现有错误的链接，但事实证明它是针对offsetHeight而不是offsetTop。

Answer 1

从我所看到的，这会影响任何没有内容的内联元素。将span-element更改为任何块元素或添加display：block; span-tag给出了与IE中相同的值。

如何使用jQuery从webkit（Chrome / Safari）获取正确的偏移顶值？ Webkit bug？

1 个答案: