圖標列表菜單在IE 7中未正確對齊

我在IE7的css中存在此對齊問題。我正在嘗試使用文本菜單創建此圖標，並且它在Firefox和IE 8中正常工作，但在IE7中，浮動不會發生。爲什麼我選擇這種類型的html代碼，當懸停列表時使用懸停效果，請使用圖片精靈而不是圖片。有人可以請我糾正我哪裏錯了。 HTML和CSS代碼如下..圖標列表菜單在IE 7中未正確對齊

CSS代碼：

<style type="text/css"> 
.designDetailLinks { 
display:block; float:right; position:relative; 
} 
.designDetailLinks li { 
display:block; float:left; margin:0 0 0 0; font-size:92%; width:auto; 
} 
.designDetailLinks .editCTO { 
display:block; padding:26px 0 0 0;color:#575656; width:40px; margin:0 auto; text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2229px; 
} 
.designDetailLinks .editCTO:hover { 
display:block; color:#1d8e3f; 
background:url(../images/icons.gif) no-repeat 0 -2270px; 
} 
.designDetailLinks .BOM { 
display:block; padding:26px 0 0 0; color:#575656; width:40px; margin:0 auto; text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2313px; 
} 
.designDetailLinks .BOM:hover { 
display:block; color:#1d8e3f; 
background:url(../images/icons.gif) no-repeat 0 -2313px; 
} 
.designDetailLinks strong { 
display:block; text-align:center; clear:left; 
} 
</style>

HTML代碼：

<div class="designDetailLinks"> 
<ul> 
<li><a href="#" class="BOM"></a><strong>Edit BOM</strong></li> 
<li><a href="#" class="editCTO"></a><strong>Edit CTO </strong></li> 
</ul> 
</div>

來源

2010-02-25 Sullan

如果你有你的代碼的一個活生生的例子，這將是我們更容易調試。 – Rowno 2010-02-25 11:57:11

如果你在一個普通的HTML文件中使用相同的代碼，你仍然可以看到我正在談論的問題... – Sullan 2010-02-25 18:40:27

一個活的例子肯定會有所幫助，但我最好的猜測是你的位置技巧，浮動，自動保證金和居中文本。對我而言，問題在於我不確定你的目標是什麼，你希望看起來如何。順便說一句，懸停在鏈接上，如果你想它的文字效果嘗試.BOM：懸停+字符串（否則我不明白爲什麼你會改變懸停顏色，沒有內容的鏈接）。 – Tom 2010-02-27 20:39:23

漂浮你在說什麼，和你爲什麼浮動左，右？

根據之前的評論，我傾向於簡化HTML和CSS--考慮到所有不同的規則，其中一些似乎是多餘的，這很難計算出發生了什麼。

對於HTML，你可以使用這樣的事情（其實，這裏的類應該可能是身份證，因爲他們是唯一標識符）：

<ul class="designDetailLinks"> 
    <li><a href="#" class="BOM">Edit BOM</a></li> 
    <li><a href="#" class="editCTO">Edit CTO</a></li> 
</ul>

...甚至只是把錨元素在div裏面（儘管這可能會冒犯列表純粹主義者）。

然後CSS可能是這個樣子：

<style type="text/css"> 
.designDetailLinks li a { 
background:url(../images/icons.gif) no-repeat; 
display:block; 
font-size:90%; /* sensible to stick with multiples of 5 */ 
font-weight: bold; 
padding: 26px 0 0 0; 
text-align: center; 
width: 40px; 
} 
.designDetailLinks .editCTO { 
background-position: 0 -2229px; 
} 
.designDetailLinks .editCTO:hover { 
background-position: 0 -2270px; 
} 
.designDetailLinks .BOM { 
background-position: 0 -2313px; 
} 
.designDetailLinks .BOM:hover { 
background-position: 0 -2313px; /* BTW: is this pixel value wrong? */ 
} 
</style>

來源

2011-08-24 16:18:53

圖標列表菜單在IE 7中未正確對齊

回答

相關問題