Question

我做了一个不错的菜单，我还为IE浏览器编写了一个新的设计。在IE7中，图像旁边的文字并不紧挨着它。它转到下一行。有人知道我该如何解决它？

Answer 1

您可以将background-image应用于锚标记。

所以替换：

ul ul a div {float:left;display:block;width:7px;height:10px;background-color:transparent;padding:0;margin:0 5px 0 0;position:relative;top:3px;}
ul ul a:hover div {display:block;background-image:url(http://ctuchicago.squarespace.com/storage/jquery/dot.png);width:7px;height:10px;}

使用：

ul ul a:hover {background:transparent url(http://ctuchicago.squarespace.com/storage/jquery/dot.png) no-repeat left center;}

同时增加<a>左侧填充（从padding:3px 16px 3px 4px;到padding:3px 16px 3px 14px;）

ul ul li a {
    font-weight:normal;
    color: #FFF;
    padding:3px 16px 3px 14px;
}

并删除嵌套在锚点中的空<div>

Answer 2

为什么在div代码中使用a？

从div代码中移除a并在background-image代码中应用CSS样式a

选中此http://jsfiddle.net/MNwD3/40/

CSS菜单下拉IE7向左浮动

2 个答案: