jQuery offset() 返回负值与 CSS3 列？答案

【问题标题】：JQuery offset() return negative value with CSS3 column?jQuery offset() 返回负值与 CSS3 列？
【发布时间】：2011-10-05 09:13:00
【问题描述】：

我是 jQuery 的新手。我想获得特定元素的顶部偏移量。我使用以下方法：

var top = $("img").offset().top;

但是，它返回负值。我不明白为什么它会返回负值？最小值应该为零，否则会出错？

附：我在 html 文件中使用 CSS3 分栏符。

非常感谢！！！

编辑：html 文件的正文：

<div id="chapter-0">
    <div>
        <h1 xml:lang="en-us" id="toc-anchor">Main Title</h1>
        <h2 xml:lang="en-us" id="toc-anchor-1">Subtitle 1</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-2">Subtitle2</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-3">Subtitle3</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
    </div>
    <div>
        <img src="images/Table-01_fmt.jpeg" alt="Table-01.indd">
    </div>
</div>

我用来检测图像高度的代码：

$(\"img\").each(function(i) {
    var top = $(this).offset().top;
    alert(top);
}

【问题讨论】：

所有xml:lang 是怎么回事？ lang 是一个有效的 HTML 属性，为什么需要前缀？另外，您为什么要转义代码中的引号？

标签： jquery css offset

【解决方案1】：

如果您发布 img 所在的 html 部分以及应用于它的 CSS 将很容易为您提供帮助。

编辑：

我检查了你发布的代码，我在 jQuery 部分有语法错误，在更正它们后，我在 Firefox 和 Google Chrome 中都试过，它工作正常。

那么你可以试试下面的 html 文件看看吗？唯一的区别是 jQuery 代码中缺少的双引号和添加右括号。

这适用于 Chrome。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function () {
            $("img").each(function(i) {
                var top = $(this).offset().top;
                alert(top);
            });
        });
    </script>

</head>
<body>
<div id="chapter-0">
    <div>
        <h1 xml:lang="en-us" id="toc-anchor">Main Title</h1>
        <h2 xml:lang="en-us" id="toc-anchor-1">Subtitle 1</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-2">Subtitle2</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-3">Subtitle3</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
    </div>
    <div>
        <img src="images/Table-01_fmt.jpeg" alt="Table-01.indd" />
    </div>
</div>
</body>
</html>

【讨论】：

感谢您的提醒。我已经用一些代码更新了我的问题。
我已经添加了我测试的代码。除了轻微的语法错误外，它对我有用。检查我编辑的答案。