瀏覽器會(huì)把inline內(nèi)聯(lián)元素間的空白字符(空格、換行、Tab等)渲染成一個(gè)空格。為了美觀,通常是一個(gè)<li>放在一行,這導(dǎo)致<li>換行后產(chǎn)生換行字符,它變成一個(gè)空格,占用了一個(gè)字符的寬度。
解決辦法:
1、為<li>設(shè)置float:left。不足:有些容器是不能設(shè)置浮動(dòng),如左右切換的焦點(diǎn)圖等。
2、將所有<li>寫在同一行。不足:代碼不美觀。
3、將<ul>內(nèi)的字符尺寸直接設(shè)為0,即font-size:0。不足:<ul>中的其他字符尺寸也被設(shè)為0,需要額外重新設(shè)定其他字符尺寸,且在Safari瀏覽器依然會(huì)出現(xiàn)空白間隔。
4、消除<ul>的字符間隔letter-spacing:-8px,不足:這也設(shè)置了<li>內(nèi)的字符間隔,因此需要將<li>內(nèi)的字符間隔設(shè)為默認(rèn)letter-spacing:normal。