Question

我在IE7的css中有这个对齐问题。我试图用文本菜单创建这个图标，它在Firefox和IE 8中工作正常，但在IE7中，浮动没有发生。为什么我选择这种类型的html代码，就是在悬停列表时有悬停效果，使用图像精灵而不是图像。有人可以纠正我在哪里出错了。 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

你在说什么浮动，为什么你左右浮动？

根据之前的评论，我倾向于简化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>

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

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

1 个答案: