IE中的CSS按钮对齐问题

Question

Hi I have a problem with these buttons, they are a UL List basically, they render fine in Chrome, and Firefox, but on IE the right buttons go about -5 pixels more Top than where they should be.

<ul id="buttonList">
                <li id="analysis">
                    <img src="images/anaylsis.png" width="210" height="34" alt="analysis" />
                </li>
                <li id="calories">
                    <img src="images/calories.png" width="211" height="34" alt="calories" />
                </li>
                <li id="ingredients">
                    <img src="images/ingredients.png" width="210" height="35" alt="ingredients" />
                </li>
                <li id="feeding">
                <img src="images/feeding.png" width="211" height="36" alt="feeding" />
                </li>
            </ul>

This is the CSS. The commented lines are what I tried before, they still don't work.

#buttonList
{
padding: 0px;
}

#analysis
{
position: relative;
padding: 0px;
margin: 0px;
}

#calories
{
position: relative;
padding: 0px;
margin: 0px;
}

#ingredients
{
/*position: relative;
left: 220px;
top: -77px;
*/
margin-left: 220px;
margin-top: -77px;
} 

#feeding
{
/*
position: relative;
left: 220px;
top: -77px;
*/
margin-left: 220px;
margin-top: -0px;
} 

I have this code set on top

* 
{
margin: 0px;
padding: 0px;
}

body
{
margin: 0px;
font-family: Helvetica, Arial, sans-serif;
} 

Answer 1

Why do the images have different height / width attributes?

Surely you want images that are all the same dimensions to align them properly?

I changed all the img height attributes to 36 (and the width s to 210 ), and used float: left and margin-right to align the images:

http://jsfiddle.net/Rm9hT/6/

Answer 2

Testded in IE6 / IE7, Chrome, FF

• DEMO: http://jsbin.com/obupe4

  #buttonList
{
    width: 430px; 
    list-style:none;
    margin:0;
    padding: 5px
}
  #buttonList li {
    margin: 5px 5px 0 0;
    display:inline;
    width: 211px;
    height: 36px
  }