這篇文章主要介紹了如何消除inline-block屬性帶來(lái)的標(biāo)簽間間隙的相關(guān)資料,需要的朋友可以參考下
1、給inline-block元素設(shè)置一個(gè)父元素。
設(shè)置父元素的font-size:0;。子元素font-size設(shè)置成合適大小,如果不設(shè)置子元素font-size,子元素會(huì)繼承父元素的0;
2、給inline-block元素設(shè)置一個(gè)父元素。(letter-spacing:字符間距)
設(shè)置父元素的letter-spacing為-4px或-8px,除谷歌是-8px外,其余是-4px。同樣要設(shè)置子元素的letter-spacing:0;否則會(huì)繼承父元素,造成子元素內(nèi)文字變形。
經(jīng)過(guò)試驗(yàn),統(tǒng)一設(shè)置成-8px,在視覺(jué)上沒(méi)有什么差異,不知道這樣做可行不可行,如果哪位有意見(jiàn),隨時(shí)可以說(shuō)。
3、給inline-block元素設(shè)置一個(gè)父元素。(word-spacing:?jiǎn)卧~間距)
設(shè)置父元素的word-spacing為-4px或-8px,谷歌,360是-8px,火狐,IE是-4px。同樣要設(shè)置子元素的word-spacing:0;否則會(huì)繼承父元素,造成子元素內(nèi)文字變形。
同上也可以統(tǒng)一設(shè)置為-8px
4、以上谷歌、火狐、360的測(cè)試均是在最新瀏覽器上測(cè)試,IE8測(cè)試。如有不妥還請(qǐng)告知。
以上內(nèi)容是小編給大家介紹的inline-block屬性帶來(lái)的標(biāo)簽間間隙問(wèn)題,希望對(duì)大家有所幫助!