css - 图标列表菜单在 IE 7 中未正确对齐

Question

我在 IE7 的 css 中有这个对齐问题。我试图用文本菜单创建这个图标，它在 Firefox 和 IE 8 中工作正常，但在 IE7 中， float 没有发生。为什么我选择这种类型的 html 代码，是为了在悬停列表时产生悬停效果，使用图像 sprite 而不是图像。有人可以纠正我哪里出错了。 html和css代码如下..

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>

Answer 1

你说的是哪个 float ，为什么要左右浮动？

根据之前的评论，我倾向于简化 HTML 和 CSS——鉴于所有不同的规则，很难弄清楚发生了什么，其中一些规则似乎是多余的。

对于 HTML，您可以使用类似这样的东西(事实上，这里的类可能应该是 ID，因为它们是唯一标识符):

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

...甚至只是将 anchor 元素放在 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>