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
  }