小数位像素对齐问题

所以StackOverflow的老板几天前为我写了一些基于jQuery的Javascript。

它有效，但它有一个烦人的问题，我想知道是否有人可以帮忙。

JavaScript正在计算用于对齐目的的边距。 它计算的值并不总是精确的像素，例如有时它的14.4等。在Firefox中，问题不存在，但在其他浏览器中，例如在Safari或Chrome中计算边距时（因为屏幕重新resize） ）最右边的盒子’跳’并且永远不会停留在容器的边缘。

正如我上面所说，在Firefox中它不会“跳”，这就是我想要的效果。

有没有什么可以阻止这种“跳跃”效果，或者它与浏览器渲染引擎完全相关并且无法控制？ 🙁

这个JSFiddle包含代码/ demo： http ： //jsfiddle.net/m4rGp/1/

（尝试在Firefox中调整浏览器宽度，然后在Safari / Chrome中重新调整，你会注意到右边的跳转）

任何回复真的非常感谢！ 非常感谢

Answer 1

这是因为只有渲染引擎。 像素中没有小数。 1px是最小的可寻址屏幕元素。 所以在更改边距之前添加Math.round

  $(".barModules li").css('margin-left', Math.round(dynMargin) + "px"); 

弹跳将在那里，因为元素的位置使其与左侧（参考）绑定。 当它看到属性margin-right:0 ，它也试图激活那个……但是由于它的margin-left被设置并且基于左边定位……它就像那样弹跳。 像debounced函数调用。

如果您的目标是获得动态余量，那么您必须使用此调整，否则转到具有居中元素的固定宽度页面，您不必担心溢出问题