chrome 6 的 jquery 边距问题

Question

我对 jquery (1.4.2) 和 chrome 6 有疑问

margin-left:auto
margin-right:auto

$(id).css('margin-left');
$(id).css('margin-right');

都返回一个 px 值(例如:327px)

Answer 1

This happens because when specifying margin:auto, Chrome (and also Safari, as they both use WebKit) sets computed value of margin-left and margin-right to an equal sized used values.

While Firefox and IE sets computed value of margin-left and margin-right to 0px. So if you have a 1000px wide page and your element takes 50% width (i.e.: 500px) and has margin:auto, then Chrome will set element's computed value of margin-left and margin-right to 250px (so it fills all the empty space between element's border edge and its parent element's content edge with margins and by so horizontally centers the element).

However, Firefox and IE will set computed value of margin-left and margin-right to 0px, so there is no margins between the element's border edge and its parent element's content edge but it is still centered. You can actually see it happening using Firebug in Firefox and Developer Tools in Chrome. In depth explanation can be found here:

http://www.3d3r.com/simon/marginAutoComputedValue

来自 smnh 在 jQuery position page 下回答

---

请记住，您可以使用 .position() 和 .offset() 更好地控制尺寸

$(id).position().left

或者您真的想要 MarginLeft 吗？