圖像鏈接區域延伸到圖像外

我正在設計一個簡單的HTML網站。我遇到的問題是我用作鏈接的圖像。我讓它們定位在我想要的位置，但後來我注意到鏈接區域延伸到圖像的左側。我正在使用相對定位，並認爲可能與它有關，但我從我的網站中刪除了所有的CSS，它仍然發生。我有一個嚴格的HTML頁面，鏈接區域仍然超出圖像大小。圖像鏈接區域延伸到圖像外

任何想法是什麼造成這種情況？

感謝

<!DOCTYPE html> 
<html> 

<head> 
    <title>Zach's Website</title> 
    <link rel="stylesheet" type="text/css" href="css/grid.css"> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
    <!--<link rel="stylesheet" type="text/css" href="css/style.css">--> 
    <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection"> 
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print"> 
    <!--[if IE]> 
     <link rel="stylesheet" href="blueprint/ie.css" type="text/css" 
     media="screen, projection"> 
    <![endif]--> 




    <div id="header"> 
     <div class="container clearfix"> 
      <img id="headbanner" class="span-24" src="img/headerbanner.png"> 

      <a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a> 
      <ul class="navigation"> 
       <li><a href="#">Experience</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li>       
      </ul> 
      <ul class="social"> 
       <li><a href="http://www.twitter.com/zachburns12" target="_blank"><img src="img/twitter.png"></a></li> 
       <li><a href="https://www.facebook.com/zach.burns1" target="_blank"><img src="img/facebook.png"></a></li> 
       <li><a href="http://www.anovelidea12.tumblr.com/" target="_blank"><img src="img/tumblr.png"></a></li> 
       <li><a href="http://www.linkedin.com/pub/zach-burns/39/538/335/" target="_blank"><img src="img/linkedin.png"></a></li> 
       <li><a href="http://www.github.com/zburns12" target="_blank"><img src="img/github.png"></a></li> 
      </ul> 

      <img id="bodyPattern" src="img/body.png"> 
     </div> 
    </div> 

</head> 

<body> 

    <div id="project1" class="container clearfix"> 

     <a href="#"><img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" /></a> 

     <a href="#"><img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" /></a> 


    </div> 

</body> 
<footer> 
    <div class="container clearfix"> 
     <img id="footerLogo" src="img/ZBLogoFooter.png"> 
     <img id="footerBanner" src="img/footerbanner.png"> 
    </div> 
</footer> 
</html>

來源

2013-10-23 zburns12

多數民衆贊成在奇怪..擺弄一些代碼。從來沒有碰到過。 –

沒有相關的標記和一個具體的例子，無法幫助你... – PeeHaa

有HTML。我把CSS註釋掉了，所以不相關。我正在使用藍圖CSS網格，如果這有什麼區別 – zburns12

你是一個高度/寬度設置爲 'A' 的標籤？理想情況下，您應該設置高度，寬度和顯示：塊，以便「a」標籤具有其確切的大小。 a{ display:block; height:100px; width:100px; }

來源

2013-10-23 18:24:38 Astarkey

我剛剛添加了這個。它仍然如此。奇怪的是，我用於社交媒體鏈接的小圖片沒有這個問題。導航也沒有。這只是標識圖像和ID爲project1的圖像 – zburns12

我有這個問題，我試過不同的方法，但他們沒有工作。這是唯一有效的測試。

<a id="headerLogo" href="index.html"></a>

然後在你的CSS，試試這個：

#headerLogo{ 
    display:block !important;/* This is compulsory */ 
    margin-left:auto;/* This is compulsory */ 
    margin-right:auto;/* This is compulsory */ 
    background:url("img/ZBLogoHeader.png") no-repeat; 
    width:YOUR_IMAGE_WIDTH; 
    height:YOUR_IMAGE_HEIGHT; 
}

這應該工作。

來源

2015-07-28 15:48:18 whizkydee

這對我有效。

<!-- HTML --> 
<a href="#" title="logo"><img src="#" alt="logo image"></a> 

/* CSS */ 
a {display: block; width: 50%;} 
img {width: 100%;}

您設置鏈接的寬度，然後將圖像的寬度設置爲鏈接寬度的100％。然後調整鏈接的寬度，直到圖像達到所需的大小。鏈接不會以這種方式超過圖像的寬度。

來源

2016-01-06 07:46:13

所以...我偶然發現這一點，因爲我遇到了同樣的問題。然後，當我在這裏沒有看到答案時，我嘗試了最後的努力。我將所有包裝在A標籤中的圖像都設置爲顯示：block;在CSS中。在此之前，A標籤允許用戶點擊圖像右側的很遠的地方，其中顯示：block;默認。嘗試顯示：內嵌塊，因爲它導致鏈接強制其自身僅限於圖像的邊緣。希望這對你有用！

來源

2017-09-07 19:33:26 BaconDouglas

圖像鏈接區域延伸到圖像外

回答

相關問題