ok~_~ok 2019-02-16 14:15 采纳率: 80%
浏览 719
已采纳

<a>标签中包裹<img>标签，为什么<a>标签中显示的高度与<img>标签的高度相差那么大?(如图)

先看代码:



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{margin:0 ; padding:0;}
  </style>
</head>
<body>
  <a href="#">
    <img src="http://file.baixing.net/201709/cdfc1b368dfeb5198a5bf25f9ab30e91.png" alt="">
  </a>
</body>
</html>



或者也可以在JSBIN中看到运行结果:https://jsbin.com/kihukazuve/edit?html,output



<img>标签的高度

<img>标签的高度




<a>标签的高度

<a>标签的高度

  • 写回答

6条回答 默认 最新

  • 天际的海浪 2019-02-16 17:28
    关注

    a是inline元素，本身就没有高度，你看控制台右边方框中的宽高都是auto。也就是官方标准没有规定。
    对于官方标准没有规定的地方，呵呵，那就是各个浏览器自己自由发挥了。
    谷歌或ie8+浏览器中是只有文本字体的高度。ie7-浏览器中是a元素中所有内容的高度。

    要谷歌浏览器的a元素呈现所有内容的高度。要设置 a{display: inline-block;}

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 已采纳回答 9月12日

悬赏问题

  • ¥15 武汉岩海低应变分析软件，导数据库里不显示波形图
  • ¥15 CreateBitmapFromWicBitmap内存释放问题。
  • ¥30 win c++ socket
  • ¥30 CanMv K210开发板实现功能
  • ¥15 C# datagridview 栏位进度
  • ¥15 vue3页面el-table页面数据过多
  • ¥100 vue3中融入gRPC-web
  • ¥15 kali环境运行volatility分析android内存文件，缺profile
  • ¥15 写uniapp时遇到的问题
  • ¥15 vs 2008 安装遇到问题