IMG标签外增加A标签后，A标签高度增加解决方案

来源：互联网发布：万达电商大数据百家编辑：程序博客网时间：2024/06/07 00:09

使用如下的结构后，会发现在FF中A标签高度增加4px, chrome中增加2px

<a href="javascript:;"><img src="IMG.src" title=" " alt=" "/></a>

原理分析：
A元素下有一个匿名文本，该文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

解决方法：
1.消除掉匿名盒子的高度，给A设置line-height:0或font-size:0;(没成功)
2.给IMG元素增加display:block;使之与匿名行级盒子不在同一布局中，也就不存在行级元素不在同一不居中的问题了；

转载地址：http://www.qdfuns.com/notes/16438/17575a92ed15745c7f81fa68f04e5e47.html

0 0