如何使用jQuery从Webkit(Chrome/Safari)中获取正确的偏移顶值? Webkit错误? [英] How to get the correct offset top value from webkit (Chrome/Safari) with jQuery? Webkit bug?
问题描述
我正在研究以编程方式定位div的外观以给出滚动外观.使用Firefox和Internet Explorer时，一切正常(信不信由你).但是，我从Webkit浏览器(Chrome/Safari)中得到了虚假的值.元素是否具有内容似乎与之有关.我正在计算一个空锚元素的位置.当元素具有可见内容时，Webkit似乎只能正确使用 .因此，我可以通过在锚点中包含一些内容来解决此问题.但是，这弄乱了我的布局，感觉就像是在跳动.另外，如果确实是我要解决的问题，我想记录一个错误.下面是一个示例文档来说明此问题.在不同的浏览器中打开它，以了解我的意思.提前非常感谢！ :-)
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>
好的，这是一个更新.感谢Charles的以下回答.我更新了示例，以说明问题和基于Charles的答案提出的解决方法.这似乎可行，但是我仍然想知道是否应该报告这是一个错误.
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+"]");
}
};
谢谢！
希望这里是最新更新.我检查了Webkit，但没有发现此错误.因此，我添加了一个新的错误以及一个指向该问题的链接.希望这会引起一些注意，并最终得到解决.这是链接: http://bugs.webkit.org/show_bug.cgi?id=72524
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
顺便说一句-我在这里简要地有一个指向现有bug的链接，但事实证明，它是用于offsetHeight而不是offsetTop的.
BTW - I briefly had on here a link to an existing bug, but it turned out that it was for offsetHeight and not offsetTop.
推荐答案
据我所知，这会影响任何没有内容的内联元素.将span元素更改为任何block元素或添加display:block; span标签的值与IE中的值相同.
From what I can see, this affects any inline-element without content. Changing the span-element to any block element or adding display: block; to the span-tag gives me the same values as in IE.
这篇关于如何使用jQuery从Webkit(Chrome/Safari)中获取正确的偏移顶值? Webkit错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
