最近开发新主题的过程当中，碰到一个很神奇的问题。li标签中间会有空白间隙。后来查询资料才得知，li标签为块级元素，当其转化为inline-block元素是会出现空白文本节点，在一些浏览器中无法察觉，如Chrome、Edge等。不过你用鼠标选中，还是可以看到的：

　　FireFox可以直接看到空隙：

　　原因是由于：浏览器的默认行为是把inline元素间的空白字符，如空格、换行等渲染成一个空格，li标签在换行后产生新的字符，产生一个空格，占用一个字符的宽度。

解决方案

方法一：将li标签全部写在一排

既然是因为换行导致的，那就可以将代码全部写在一排，像这样：

<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>

但是这样可读性差、难以维护、逼死强迫症和洁癖。

方法二：将父元素font-size属性设置为0

　　空白元素节点的字体设置为0 ，自然不占宽度也就不会产生白边了，但是这样不是所有浏览器都能成功的，如一些低版本的浏览器仍会产生空白缝隙。

.wrap ul{font-size:0px;}

我比较推荐第二种方法，设置完成后效果如下：