<a>标签内的<img>标签大小不一致

Question

我有以下基本的HTML内容：

<div>
    <a href="...">
        <img src="..." width="81" height="75" ... />
    </a>
</div>

实际上，“A”标签的高度仅为19px，而图像元素被设置为75px。

即使我手动将“A”标签的高度设置为75px，它也不会被设置，仍然保持原样。

“DIV”元素围绕着“A”标签，可以自动得到与“IMG”元素完全相同的尺寸，而无需手动或任何其他设置。

浏览器是Chrome，最新版本。

如何正确设置“A”标签的高度，以便始终（自动）覆盖整个“IMG”元素？

- TheCuBeMan

---

为什么需要为标签设置高度？无论其显示尺寸如何，它都会覆盖img元素和任何其他包含的元素。 - Gil

还可以尝试为 a 设置 font-size: 0;。 - Alex Solomaha

Answer 1

尝试将display:inline-block添加到<a>元素中。

- Niet the Dark Absol

---

并且，很常见的是，vertical-align: top。 - FelipeAls

Answer 2

对我来说，display: contents 很有效，因为具有此属性的元素不会生成带有边距/填充的框。

来自 display: contents doc：

这些元素本身不会产生特定的框。它们被其伪框和子框替换。

- happy songs

Answer 3

如果inline-block声明不够用，可以检查line-height…

<a href="" style="line-height: 1;">
   <img src="logo.jpg" alt="logo">
</a>

- Milksamsa

Answer 4

我所做的是给锚点标签添加 z-index。

position: absolute; 
z-index: 2

- Kevin M.

Answer 5

将您的代码修改为以下内容（添加id）：

<div>
    <a href="..." id="link">
        <img id="img" src="..." width="81" height="75" ... />
    </a>
</div>

试试这个 JavaScript

document.getElementById("link").style.height=document.getElementById("img").height+"px";

- AlieN

Answer 6

点击下面的链接查看演示

演示链接

这里运行得很好

实际图像尺寸为734*459，但仍然可以正常工作。

<div  >
<a href="#" >
    <img src="http://i.telegraph.co.uk/multimedia/archive/02369/potd-dummy-gull_2369858k.jpg" width="81" height="75"/>
</a>

- Harshal Patil

Answer 7

我尝试过这里的每个答案组合，但我不得不在“a”块中结合行高和在图像块中垂直对齐。

<a href="#" style="line-height: 1;">
    <img id="myimage" src="path" style="vertical-align: bottom;"/>
</a>

- Cyril Bigot