Why is ie7 ignoring the left-margin on my first li

问题:

http://blog.helpcurenow.org/test/mockups/mar2010/lp.html

In the above landing page, I have an offers box that has four donation buttons. The first three are targeted with individual id's and given a left margin of 13px.

All is well in every browser I'm viewing in except ie7. For some reason ie7 is ignoring the left-margin of 13px on the first list item, and only on that one.

The strange part is when I open ie's developer tools (not actually viewing in ie7, but using ie8 in ie7 mode) and select the element, it shows that the 13px margin is there, and not crossed out. The browser just seems to be ignoring it!

Is there some ie7 quirk I should know about here or did I miss a CSS declaration I should have added? Any ideas??

Thanks!

回答1:

Try setting the padding on the ul that houses those lis to 10px 13px, then remove the margin-left from the lis.

回答2:

Just clear the wrong borders, line-heights and box-models and you are safe.

in the top first line of your CSS, you just add:

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,img {border:none;padding:0;margin:0; /* etc. like font-size:10px;line-height:10px; */}

then you can set the "wanted" values on each item afterwards: further more you can set

display:block;

on your elements then they will use the same box-model. IE6/IE7 does not understand inline-block which is default for some elements I believe.