设置宽度在chrome中正常工作，但不是firefox？答案

【问题标题】：setting widths works correctly in chrome, but not firefox?设置宽度在chrome中正常工作，但不是firefox？
【发布时间】：2011-05-02 16:54:29
【问题描述】：

我正在用 jquery 构建一个小分页。我找到了一个做一些类似事情的插件（我仍在使用我自己的）。我的和这个插件：http://tympanus.net/jPaginate/ 在 Firefox 中都有类似的问题。如果您在该插件的演示页面上查看“演示 5”，您可以看到问题。在chrome中它非常好。在 Firefox 中，最后一个数字环绕到下一行。

基本上我有一个ul，其中包含li 元素。我需要将所有li 宽度相加并将ul 宽度设置为该数字。我需要它是精确的（如果你添加更多的宽度，那么包装问题就不会发生，但是当你滚动到数字列表的末尾时，会有一堆空格）

知道为什么 Firefox 会这样吗？

顺便说一句，我在 mac osx 上。

【问题讨论】：

我在 Win7 中的 Firefox 4.0.1 中看不到这一点。
@entropo，嗯，也许这只是一个 mac 的东西？我编辑了我的帖子以指定这一点。
请不要在问题标题中写标签。
IE9 也有这个问题（有趣的是，IE7 和 8 没有）... IE10 PP1 也有。奇怪。
Windows 上的 IE9 和 IE10 和 Firefox 4（以及你在 Mac 上仍然关心的任何版本的 Firefox，我认为在 Linux 上）都对文本进行亚像素字形定位，因此宽度一连串文本的最终像素数为非整数。旧的基于 GDI 的 IE 版本和基于 WebKit 的浏览器将文本捕捉到像素网格，因此文本以整数宽度运行。

标签： jquery css firefox google-chrome rendering

【解决方案1】：

我解决了这个问题： Jquery.paginate.js -> 只需替换

_ul.css('width',insidewidth+'px'); [3rd line from last]

与

_ul.css('width',insidewidth+5+'px');

它已解决。在 FF、Crome 工作，即 7、8、9 享受

【讨论】：

【解决方案2】：

您使用什么方法来获取<li> 宽度？如果您使用 jQuery 的 width() 或 offsetWidth 或 clientWidth，那么您将得到不正确的数字，因为所有这些都舍入了非整数宽度。唯一能给你正确答案的是计算出的样式宽度和getBoundingClientRect().width。

Chrome 在进行布局之前会将宽度四舍五入为整数，因此四舍五入方法不会再造成任何损坏（但结果是，当四舍五入宽度的总和实际上并没有结束时，它可能会在边缘周围出现接缝到容器的宽度）。

【讨论】：

【解决方案3】：

我在 IE 中使用了开发工具，当我删除了主体上的 letter-spacing:2px 样式时，它修复了它。不确定这是否会为 Firefox 修复它，但它为 IE9-10 修复了它，我猜这是同一个问题。

【讨论】：