在錨標記中的圖像下方顯示某些顏色的小行

因此，我將兩個圖形作爲導航按鈕添加到了我的網頁。與按鈕顏色相同的小行出現在兩個按鈕之間和之間。這是一張顯示問題的圖片。在錨標記中的圖像下方顯示某些顏色的小行

這些按鈕是在煙花創建，然後我救了他們，並鏈接到他們在我的網頁。這不是一個來自一個圖形缺陷的線。與填充散開圖形不能解決問題，如下圖所示：

也沒有試圖把一個CSS值邊界的情況下，刪除它是出於某種原因一小塊邊界。我知道它不是圖像中的缺陷，因爲單獨的兩個圖像在單獨的網頁上不會產生任何線條，可惜由於缺乏聲譽（不超過2個鏈接），我無法在此張貼截圖。

所以我不知道如何刪除這條令人討厭的線，當他們是彼此相鄰。目前只有兩個按鈕，但最終會發展成完整的網頁。這些按鈕將充當導航欄，所以我需要它們靠近，這條線路將消失！在jQuery中創建時，這些按鈕具有不透明度增加和減小效果。我在Chrome瀏覽器中查看這些按鈕以獲得屏幕截圖，但我沒有嘗試過其他瀏覽器，但我需要將此行從所有瀏覽器中刪除。這是我所有的網頁下面的代碼：

$(document).ready(function(){ 
 
\t $(".nav_btn").mouseenter(function(){ 
 
\t \t $(this).fadeTo(100, 1.0); 
 
\t }); 
 
\t $(".nav_btn").mouseleave(function(){ 
 
\t \t $(this).fadeTo(100, 0.75); 
 
\t }); 
 
});

.nav_btn{ 
 
\t opacity: 0.75; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <base href="C:/Users/Adasli199/CGC project/"; target="_self"> 
 
\t \t <link rel="stylesheet"; type="text/css"; href="code/stylesheet.css"/> 
 
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
\t \t <script type="text/javascript"; src="code/jQuery.js"></script> 
 
\t \t <link rel="shortcut icon" href="Assets/CGC icon.ico"/> 
 
\t \t <title> CGC | Template </title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="nav_bar"> 
 
\t \t \t <a href="Pages/Home.html"> 
 
\t \t \t \t <img class="nav_btn"; id="home_btn"; src="Assets/Home button.png"/> 
 
\t \t \t </a> 
 
\t \t \t <a href="Pages/SEO.html"> 
 
\t \t \t \t <img class="nav_btn"; id="SEO_btn"; src="Assets/SEO button.png"/> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t </body> 
 
</html>

如果有人可以幫助我將非常感激！謝謝！

來源

2015-02-09 Adam0410

這是默認錨下劃線你可以「修復」它通過從導航欄刪除text-decoration鏈接

#nav_bar > a { 
 
    text-decoration: none; 
 
}

<div id="nav_bar"> 
 
    <a href="Pages/Home.html"> 
 
     <img class="nav_btn" id="home_btn" src="Assets/Home button.png" /> 
 
    </a> 
 
    <a href="Pages/SEO.html"> 
 
     <img class="nav_btn" id="SEO_btn" src="Assets/SEO button.png" /> 
 
    </a> 
 
    </div>

你也並不需要分號來分隔IMG屬性

來源

2015-02-09 23:06:59 adriano66

將font-size: 0添加到您的CSS規則中。問題是你的a標籤期望有某種文本，並且它們不會保存在圖像標籤周圍的空白處。所以它有助於爲你的空白添加下劃線。你顯然不想那樣，但是你去了。

或者，您可能會刪除a標記和img標記之間的所有空白，但font-size:0將保存您的代碼可讀性。

來源

2015-02-09 22:58:40

在錨標記中的圖像下方顯示某些顏色的小行

回答

相關問題