根本原因:inline-block元素之間之所以有空白間距是因為空格有字體大小原因。
?
第一種:
把代碼之間的換行空白都去掉。
? ? ? 例如:
? ? ?<div>第一個inline-block元素</div><div>第二個inline-block元素</div>
第二種:
把inline-block元素用一個大的div包起來,然后設置其字體大小為0即可,inline-block元素字體大小再單獨設置。
例如:
? ? ?<div style=”font-size:0" class="space">
? ? ? ? ? <div>第一個inline-block元素</div>
? ? ? ? ? <div>第二個inline-block元素</div>
? ? ?</div>
這個方法,基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器,就是Chrome, 其默認有最小字體大小限制,因為,考慮到兼容性,我們還需要添加:?
類似下面的代碼:
.space {
??? font-size: 0;
??? -webkit-text-size-adjust:none;
}
?