為什么<a>標簽位於下方</a> <a><img></a> <a>在屏幕上（僅限Firefox 4 + Chrome！）</a>

Question

我不確定這是否是最新的Firefox和Chrome中的故障/怪癖，但我有一個<img>標簽，該標簽已被<a>標簽封裝，將圖像轉換為鏈接。

問題出現在鏈接的點擊框位於圖像下方。 圖像也是可點擊的，但圖像下方的死區也是可點擊的。

<img>有一個左下邊距規則應用於它，我認為這是導致問題的原因，但我不明白為什么......我也嘗試使用顯式的</img>結束標記，因為它沒有也解決了這個問題。

Internet Explore 8按預期工作！ 不顯示以下問題。 它顯示了圖像下方的框，但在IE 8中無法點擊死區。我認為它應該如何工作。

這是一張圖片來澄清我的意思：

我剛剛添加了一條規則來綁定所有<a>標簽。

這是代碼......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    a
    {
        text-decoration: none;
        border: 1px solid #F00;
    }

    #testimg        {
        margin-left: 20%;
        margin-bottom: 25px;
    }
</style>
</head>
<body>
<div><a href="#"><img id="testimg" alt="" src="imgs/landing/popup_sendbtn.png" /></a></div>
</body>
</html>

這真讓我抓狂！ 任何幫助，將不勝感激。

Answer 1

你有img的保證金。 將它們移動到標簽，它可能會修復它。

Answer 2

<img>下方的可點擊區域是文本內容應該位於<a>元素中的位置。

如果您只想要圖像區域可點擊，請為<a>相同的寬度和高度，使其display: block ，並將邊距移動到<a> 。

a {
    display: block;
    width: /* width of your image */;
    height: /* height of your image */;
    text-decoration: none;
    margin-left: 20%;
    margin-bottom: 25px;
    border: 1px solid #F00;
}

為什么<a>標簽位於下方</a> <a><img></a> <a>在屏幕上（僅限Firefox 4 + Chrome！）</a>

問題描述

2 個解決方案

解決方案1
3 2011-04-12 05:21:09

解決方案2
1 已采納 2011-04-12 05:21:44

為什么<a>標簽位於下方</a> <a><img></a> <a>在屏幕上（僅限Firefox 4 + Chrome！）</a>

問題描述

2 個解決方案

解決方案1 3 2011-04-12 05:21:09

解決方案2 1 已采納 2011-04-12 05:21:44

解決方案1
3 2011-04-12 05:21:09

解決方案2
1 已采納 2011-04-12 05:21:44