無法從Chrome或Firefox中的超鏈接IMG中刪除邊框（在IE8中工作）

Question

我在母版頁上使用了jquery菜單，菜單是用無序列表構建的。在每個裏面，都有錨標籤。在這個錨標籤裏面，有一個圖片標籤和一對夫婦跨度。

現在，菜單工作的方式是，您只需看到文本（無邊框或背景顏色），直到您將鼠標懸停在列表項上，此時圖像和跨度就會展示出來並變得可見。一切工作都很好，並且所有內容的顯示都與IE8中的一樣，但是當我在Chrome或Firefox中運行網站時，每個列表項都顯示爲一個很薄的灰色框。雖然這看起來不錯，但這不是我想要的效果。我認爲這與錨點直接相關，但沒有一個標準的CSS技巧正在工作。我嘗試從其中一個列表項中移除錨標記，果然，該列表項的邊界已消失。不幸的是，我需要那裏的超鏈接。 img標籤有一個src屬性，並且它被定義並且拉出正確的圖像。

 text-decoration:none; 
     border-style:none; 
     border:none; 
     outline:none; 

我也嘗試添加：在CSS（我必須在頁面的Site.Master的HEAD，我已經爲「一」，「一個IMG」，「一個跨越」設置以下屬性直接到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; 
} 

Answer 1

感謝張貼樣式表。那灰色的「邊界」你看到的是這樣的規則：

ul.sdt_menu li > a { 
    -moz-box-shadow:0px 0px 2px #000 inset; 
    -webkit-box-shadow:0px 0px 2px #000 inset; 
    box-shadow:0px 0px 2px #000 inset; 
} 

根據http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx IE沒有添加的box-shadow支持，直到IE9，這就是爲什麼你沒有看到在IE8的影子。