设置宽度在chrome中正常工作,但不是firefox?

时间:2011-05-02 16:54:29

标签: jquery css firefox google-chrome rendering

我正在用jquery建立一个小小的分页。我找到了一个做类似事情的插件(我还在使用自己的插件)。我和这个插件:http://tympanus.net/jPaginate/在firefox中都有类似的问题。如果您在该插件的演示页面上查看“演示5”,则可以看到问题所在。在铬合金中它完全没问题。在firefox中,最后一个数字包含在下一行。

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

为什么firefox会以这种方式运行?

顺便说一下,我在mac osx上。

3 个答案:

答案 0 :(得分:2)

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

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

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

其Solved。在FF,Crome工作,即7,8,9 享受

答案 1 :(得分:1)

您使用什么方法来获取<li>宽度?如果您正在使用jQuery的width()offsetWidthclientWidth,那么您将获得不正确的数字,因为所有这些都会使非整数宽度变得圆滑。唯一可以给出正确答案的是计算出的样式宽度和getBoundingClientRect().width

Chrome在进行布局之前将宽度舍入为整数,因此舍入方法不会在那里造成任何更多的伤害(但是当圆角宽度的总和实际上没有结束时,它最终会在边缘处出现接缝到容器的宽度。)

答案 2 :(得分:0)

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