我在母版页上使用 jquery 菜单，菜单是用无序列表构建的。在每个 li 里面，都有一个锚标签。在这个锚标签内，有一个图像标签和几个跨度。
现在，菜单的工作方式是您只看到文本（没有边框或背景颜色），直到您将鼠标悬停在列表项上，此时图像和跨度展开并变得可见。一切都很好，一切都在 IE8 中显示，但是当我在 Chrome 或 Firefox 中运行该站点时，每个列表项都显示为一个灰色的细框。虽然这看起来不错，但这不是我想要的效果。我认为这与锚点直接相关，但标准 CSS 技巧都不起作用。我尝试从其中一个列表项中删除锚标记，果然，该列表项的边框消失了。不幸的是，我需要那个超链接。img 标签有一个 src 属性，它被定义并拉取正确的图像。在 CSS 中（我在 site.master 页面的 HEAD 中，
text-decoration:none;
border-style:none;
border:none;
outline:none;
我也尝试将border="0" 直接添加到IMG，但一点运气都没有。我唯一一次看到边框消失是当我删除锚标签时。
我坚持这一点。任何帮助是极大的赞赏！
为方便起见，下面是其中一个菜单项在代码中的样子：
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" border="0" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">the island</span>
<span class="sdt_descr">About</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Airlines</a>
<a href="#">Travel Info</a>
<a href="#">Currency</a>
</div>
</li>
这是样式表：
ul.sdt_menu
{
position: absolute;
top: 148px;
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:968px;
border: 0px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
border: 0px;
}
ul.sdt_menu li{
float:left;
width:161px;
height:85px;
position:relative;
cursor:pointer;
text-decoration:none;
outline:none;
border:0px;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:161px;
height:85px;
z-index:12;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
text-decoration:none;
outline:none;
border:0px;
}
ul.sdt_menu li a img{
border:none;
text-decoration:none;
outline:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:161px;
height:60px;
z-index:15;
border:none;
text-decoration:none;
outline:none;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:161px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
border:none;
text-decoration:none;
outline:none;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-decoration:none;
outline:none;
border:none;
}
ul.sdt_menu li span span.sdt_link{
color:#333333;
font-size:24px;
float:left;
clear:both;
text-decoration:none;
outline:none;
border:none;
}
ul.sdt_menu li span span.sdt_descr{
color:#0066FF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:12px;
letter-spacing:1px;
text-decoration:none;
outline:none;
border:none;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:161px;
overflow:hidden;
height:161px;
top:85px;
left:0px;
display:none;
background:#000;
z-index:100;
text-decoration:none;
outline:none;
border:none;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0066FF;
text-decoration:none;
outline:none;
border:none;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:5px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#666666;
}