jQuery - offset().left 为 float 元素提供了错误的值

Question

我在 nav 标签内有 float 元素。当我使用 offset() 函数时，我得到了位置的奇怪 float 值，这是不正确的。这里有什么问题？

js fiddle

HTML

<div id="navi">
        <a class="logo" >NAVI</a>
        <nav>
            <a>Element A</a>
            <a>Element B</a>
            <a>Element C</a>
        </nav> 

    </div>

   <br><br>
   <input type="text" />

CSS

#navi {
height: 60px;
width: 100%;
  position: relative;
  clear: both;
background: lightgrey;
}

 .logo {
  float: left;
  margin-left: 0;
}

nav {
  position: relative;
  float: right;
}
a{
  margin-left: 30px;
}

JS

$('a').eq(1).offset().left

Answer 1

偏移量实际上返回了正确的值，因为您的字体以及您的 nav 没有以像素为单位完美对齐。以下是获取“真实”nav 宽度的方法:

$("nav")[0].getBoundingClientRect().width

将元素 A 的左偏移量添加到 nav 的宽度，您会发现添加效果非常好。明显的差异是元素 A 上的 30px 边距，它不包含在元素 A 的偏移量中，但包含在 nav 的宽度中。 http://jsfiddle.net/vo1b3e86/4/

减去 30px 后，您将得到主体的宽度。

如果您想删除小数点右边的数字，您可以使用这些 Math 函数之一，具体取决于您的需要:

• Math.round() 会四舍五入到最接近的整数
• Math.floor() 会向下取整
• Math.ceil() 会向下取整

如果这对您有意义，请告诉我。