图标列表菜单在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中未正确对齐

回答

相关问题