In my script I’m removing the list items and replacing them with data gathered from a script. The weird thing is, inline-block elements shift x% when they’re re-appended.
Here’s a fiddle for you to see what’s happening. I tried it in Safari 5.1.7 (Mac) and Firefox 14.0.1 (Mac). I thought it might be a a rendering issue but the issue apparently is not related to that. I checked the styles I wrote plus the computed style of both (before and after) and I could not find anything different.
Does anybody know what’s happening?
EDIT:
The results, for me, are:
a1: 54
div: 75
a2: 96a1: 54
div: 70 <== note the 5px shift
a2: 86 <== note the 10px shift (5+5)
In the original HTML you have whitespace (specifically, line breaks) between the elements, which turns into a single space when rendering.
But when construct the HTML in your JavaScript the elements are appended with no whitespace between them, so they’re rendered directly adjacent to each other, causing them to shift left.
See http://jsfiddle.net/barmar/FeDxk/2/