在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按鈕對齊問題

回答

相關問題