清除li标签之间空白间隙

什么情况下li标签会产生空白文本节点

• li标签为块级元素，当其转化为inline-block元素是会出现空白文本节点，在一些浏览器中无法察觉，如Chrome、Edge等，但在Firefox浏览器中可以看到元素节点。展示如下：
  

引起空白间隔的原因

• 浏览器的默认行为是把inline元素间的空白字符，如空格、换行等渲染成一个空格，li标签在换行后产生新的字符，产生一个空格，占用一个字符的宽度。（== 在非HTML标签和BODY两个标签<这两个会自动删除空白>上都会遇到这个问题，他会把换行符和空格作为文本节点 ==）

四种解决方案

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

• 举例：****使用JS动态生成**元素节点时产生的li间无空白元素节点就是这个原因，JS生成的元素节点本身写在一排，但在浏览器中展开元素均经过了格式化无法察觉。
• 缺点： 可读性差、难以维护、逼死强迫症和洁癖

方法二：使用浮动

• 原理： 使用浮动会把li紧紧的靠在一起也就清除li之间的空隙
• 缺点： 容易导致高度塌陷、影响其他元素布局、轮播焦点图没法用

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

• 原理： 空白元素节点的字体设置为0 ，自然不占宽度也就不会产生白边了
• 缺点： 不是所有浏览器都能成功的，如Safari浏览器仍会产生空白缝隙

方法四：设置父元素的letter-spacing属性

• 原理： letter-spacing控制增加或减少字符间的空白（字符间距），将其设置为较大的负值（看字体大小）可以有效的清除空白缝隙
• 优点： IE9+浏览器均兼容

效果展示