首頁 > web前端 > js教程 > 主體

如何消除inline-block屬性帶來的標籤間隙_javascript技巧

WBOY
發布: 2016-05-16 15:07:07
原創
1412 人瀏覽過

1、為inline-block元素設定一個父元素。

  設定父元素的font-size:0;。子元素font-size設定成適當大小,如果不設定子元素font-size,子元素會繼承父元素的0;

2、為inline-block元素設定一個父元素。 (letter-spacing:字符間距)

 設定父元素的letter-spacing為-4px或-8px,除Google是-8px外,其餘是-4px。同樣要設定子元素的letter-spacing:0;否則會

繼承父元素,造成子元素內文字變形。

  經過試驗,統一設定成-8px,在視覺上沒有什麼差異,不知道這樣做可行不可行,如果哪位有意見,隨時可以說。

3、為inline-block元素設定一個父元素。 (word-spacing:單字間距)

  設定父元素的word-spacing為-4px或-8px,Google,360是-8px,火狐,IE是-4px。同樣要設定子元素的word-spacing:0;否則會繼承父元素,造成子元素內文字變形。

  同上也可以統一設定為-8px

4、以上Google、火狐、360的測試都是在最新瀏覽器上測試,IE8測試。如有不妥還請告知。

以上內容是小編給大家介紹的inline-block屬性帶來的標籤間隙問題,希望對大家有幫助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!