大地Dudy,前端工程師 / 全棧開發(fā)工程師
a元素下有一個(gè)匿名文本,這個(gè)文本外有一個(gè)匿名行級(jí)盒子,它有的默認(rèn)vertical-align是baseline的,而且往往因?yàn)樯衔膌ine-height的影響,使它有個(gè)line-height,從而使其有了高度,因?yàn)閎aseline對(duì)齊的原因,這個(gè)匿名盒子就會(huì)下沉,往下?lián)伍_一些距離,所以把a(bǔ)撐高了。
解決辦法一是消除掉匿名盒子的高度,也就是給a設(shè)置line-height:0或font-size:0;
解決辦法二是給兩者vertical-align:top,讓其top對(duì)齊,而不是baseline對(duì)齊
解決辦法三是給img以display:block,讓它和匿名行級(jí)盒子不在一個(gè)布局上下文中,也就不存在行級(jí)盒的對(duì)齊問(wèn)題
其他解決辦法也有,但這些都是從根本上解決問(wèn)題