IE中的CSS按钮对齐问题

Question

嗨，我对这些按钮有疑问，它们基本上是UL列表，它们在Chrome和Firefox中呈现良好，但是在IE上，右侧按钮的顶部比应有的位置多了-5像素。

<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>

这是CSS。 带注释的行是我之前尝试过的，但仍然无法使用。

#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;
} 

我在上面设置了此代码

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

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

Answer 1

为什么图像具有不同的height / width属性？

您确定要使所有尺寸相同的图像正确对齐吗？

我将所有img height属性更改为36 （ width s更改为210 ），并使用float: left和margin-right对齐图像：

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

Answer 2

在IE6 / IE7，Chrome，FF中测试

• 演示： 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
  }