开发者

jquery margin problem with chrome 6

I have a pr开发者_运维问答oblem with jquery (1.4.2) and chrome 6

margin-left:auto
margin-right:auto

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

both return a px value(ex: 327px)


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

from smnh answer under jQuery position page


remember that you can have more control with dimensions using .position() and .offset()

$(id).position().left

or do you really want the MarginLeft ?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜