2012-08-09 54 views
0

我試圖同時對鏈接懸停文字修飾,以修復IE圖像邊界問題。 邊框問題是固定的,但裝修沒有了。的CSS:IMG邊框和文字裝飾

<a href="home.php" class="menu-links"> 
<div class="menu-home">Home</div> 
<img class="menu-home-logo" src="images/home.png" width="32" height="32"> 
</a> 

CSS:

.menu-links { 
    color:#000; 
    text-decoration:none; 
} 
.menu-links:hover { 
    text-decoration:underline; 
} 
.menu-links img {border: none; } 
+0

你想要的形象被強調?當您懸停鏈接時,我使用上面的代碼和「Home」加下劃線。 – Jason 2012-08-09 17:10:56

+0

@Jason不,我希望當鼠標懸停鏈接時文本被加下劃線。我想刪除邊框,因爲在IE瀏覽器周圍有一個邊框img。 – xperator 2012-08-09 17:14:57

回答

1

包括你的代碼是在Internet Explorer和Firefox正常工作。當您懸停並且圖像沒有邊框時,首頁會加下劃線。如果你想要的形象被強調,以及文本,你需要添加border-bottom而非text-decoration在圖像上懸停:

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      .menu-links { color:#000; text-decoration:none; } 
      .menu-links:hover { text-decoration:underline; } 
      .menu-links img { border: none; } 
      .menu-links:hover img { border-bottom: 1px solid #000; } 
     </style> 
    </head> 

    <body> 
     <a href="home.php" class="menu-links"> 
      <div class="menu-home">Home</div> 
      <img class="menu-home-logo" src="images/home.png" width="32" height="32"> 
     </a> 
    </body> 
</html> 

如果沒有顯示出來正確的,你可能有一些其他CSS干擾您上面發佈的樣式。使用像Firebug這樣的調試器來分析控件,看看有什麼能夠防止下劃線顯示出來。

+0

是啊,它沒有顯示......我真的不明白髮生了什麼事。它在DreamWeaver上工作,但不能在我上傳文件並通過瀏覽器檢查時使用。它不應該是緩存問題,因爲我可以看到更改的源代碼。感到困惑 – xperator 2012-08-09 17:28:48

+0

你有什麼辦法分享整個頁面嗎? – Jason 2012-08-09 18:04:22

+0

我不能共享頁面本身,但這裏是整個css文件:http://pastebin.com/nGerzidF我認爲你是正確的與下劃線有衝突。試過你的代碼與我的CSS文件,它不起作用。似乎有什麼問題我的css – xperator 2012-08-09 18:16:30