在IE浏览器的CSS按钮对齐问题

嗨我有这些按钮的问题，它们基本上是一个UL列表，但它们在Chrome和Firefox中渲染得很好，但是在IE右边的按钮上移动约-5个像素应该。在IE浏览器的CSS按钮对齐问题

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

来源

2011-03-25 Ryan S

嗯，首先，如果你真的仔细想想，什么是切缘阴性？如果你想象盒子模型，那看起来会怎样？尝试使用相对定位。 – cypher 2011-03-25 12:35:55

你有一个reset.css？ – corroded 2011-03-25 12:36:50

@corroded no我没有一个reset.css，你是什么意思的东西来删除所有的利润率？我有这个，如果它有帮助，我会把它放在 – 2011-03-25 12:39:14

Testded在IE6/IE7，铬， 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 
    }

来源

2011-03-25 12:42:34

这适用于Chrome和Firefox，但在IE浏览器中，它们彼此对齐。 – 2011-03-25 12:49:30

，它根本不起作用，然后它们在下面彼此对齐 – 2011-03-25 12:52:26

@Ryan Sammut：我已经在IE6/7中亲自测试过它，它工作正常。 ;） – 2011-03-25 12:57:49

设置图像为什么会有不同的height/width属性？

当然，你想图像都是相同的尺寸，以适当地对齐它们？

我改变所有imgheight属性36（以及width s到210），以及用于float: left和margin-right到对准图像：

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

来源

2011-03-25 12:41:49 thirtydot

这不适合我，他们正在彼此对齐，所有四个 – 2011-03-25 12:45:36

不，我不希望他们在彼此之下，我希望他们把2和2彼此并排。 – 2011-03-25 12:48:21

如果您看到失败评论，请忽略它。我完全误解了你。 – thirtydot 2011-03-25 12:48:39

在IE浏览器的CSS按钮对齐问题

回答

相关问题