craigsworks.com - Support Forum

Such conditions should be met to reproduce this issue:
1. IE9,8,7. Chrome and Firefox is fine.
2. Tip target is wrapped by a position:relative container.
3. position-container prop is set to that container
4. The container has an auto margin-left/right

Test case: http://jsfiddle.net/fDavN/855/

I've spent lots of time on this issue, and found out that it's probably due to jQuery's position() function for at least all 1.4+ version. The whole story is kinda complicated.

Firstly, in position() function, the final result excludes element's marginLeft and marginTop, which I still don't know why this action is taken.
jquery-1.6.1.js:8790
<code>
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
</code>

Then, qtip2's position calculation is heavily rely on jquery.position(), see PLUGINS.offset().

And, when margin is auto, marginLeft's value is quite different between WebKit and IE, which results in this issue.

Actually, it's not IE's problem. You can change margin to a fixed value, like 50px. And then position is wrong even for WebKit browser. See http://jsfiddle.net/fDavN/856/ with chrome.
So my workaround is to stop using 'container' property.

I'm stickying this as I can't really do anything to fix it, but it may be of interest to others.