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更改为210），并使用float: left和{ {1}}对齐图片：

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

Answer 2

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

IE中的CSS按钮对齐问题

2 个答案: