小数点后像素对齐问题 [英] Issue with decimal place pixel alignment

问题描述

几天前，一个StackOverflow-er同事为我写了一些基于jQuery的Javascript.

So a fellow StackOverflow-er wrote out some jQuery based Javascript for me a few days ago.

它可以工作，但是有一个烦人的问题，我想知道是否有人可以提供帮助.

It works, but there's an annoying issue with it and I wondered if anyone could help out.

JavaScript正在计算边距以用于对齐目的.它计算的值并不总是精确的像素，例如有时为14.4等.在Firefox中不存在此问题，但在其他浏览器(如Safari或Chrome)中，当计算边距时(随着屏幕尺寸的改变) )最右边的侧框跳了起来"，从不完全靠在容器的边缘.

The JavaScript is calculating a margin for alignment purposes. The value it calculates is is not always an exact pixel, e.g sometimes its 14.4 etc. In Firefox the issue does not exist, but in other browsers such as in Safari or Chrome when the margin is being calculated (as the screen is re-sized) the far right hand side box 'jumps' and never quite stays against the edge of the container.

如上所述，在Firefox中它不会跳转"，这就是我想要的效果.

As I said above, in Firefox it does not 'jump', and this is the effect I was looking for.

是否有什么方法可以阻止这种跳跃"效果，或者它与浏览器渲染引擎完全相关并且不受我的控制? :(

Is there anything that could be done to stop this 'jumping' effect or is it completely related to the browsers rendering engine and out of my control? :(

此JSFiddle包含代码/演示: http://jsfiddle.net/m4rGp/1/

This JSFiddle contains the code/demo : http://jsfiddle.net/m4rGp/1/

(尝试在Firefox中然后在Safari/Chrome中调整浏览器宽度的大小，您会注意到右边的跳转)

任何回复都非常非常感激！非常感谢

Any reply's are really, really appreciated! Many thanks

推荐答案

这仅是因为呈现引擎.像素中没有小数位. 1px是最小的可寻址屏幕元素.因此，在更改边距之前，请添加Math.round

This is because of the rendering engine only. There are no decimals in pixel. 1px is the smallest addressable screen element. So before changing the margin add a Math.round

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

但是弹跳将在那里，因为该元素的定位方式使其绑定到其左侧(参考).当它看到属性margin-right:0时，它也会尝试激活该属性...，但是由于其margin-left被设置并基于左...定位，因此它会像这样弹跳.就像debounced函数调用一样.

yet the bouncing will be there because the element is positioned in such a way that it is bound to its left (reference). When it sees the attribute margin-right:0, it tries to activate that one too ... but due to its margin-left being set and positioning based on left .... it is bouncing like that. like a debounced function call.

如果您的目标是获得动态边距，则必须对此进行调整，否则，请选择具有居中元素的固定宽度页面，而不必担心溢出问题

If your aim is to get a dynamic margin, then you have to adjust with this, else go for a fixed width page with centered elements and you don't have to worry about overflow problem

这篇关于小数点后像素对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！