Question

这一直困扰着我很长一段时间。我正在尝试做一些简单的事情，在一个ul容器中浮动li元素，并给li元素悬停效果。代码如下所示：所有css都已经休息，元素是显示块，而类清除添加了一个＆＃34; ＆＃34;清除元素后的两个显示块

<ul class="clear">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

ul > * { float: left; border: 1px solid black  }
li{ padding: 10px;}
li:hover{ background-color: white; }

现在由于某种原因（也许是我的字体）ul的宽度在不同的浏览器中发生变化，所以我不能硬编码ul的宽度以完全适合所有的li;精细。所以我所做的就是在所有负载之后，我测量每个li的宽度并将其加起来并使其成为ul的宽度。

然而这也失败了，因为jquery.width（）/ offsetwidth / .outerWidth只返回整数，而某些元素有像.34px这样的局部像素，宽度稍微过宽（导致间隙）或者很小并且浮动的元素将下降到下一行。

有没有办法更准确地测量宽度？

Answer 1

这应该为你做，请参见小提琴，例如https://jsfiddle.net/c259LrpL/28/

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

我可以测量元素的部分像素精确宽度

1 个答案: