什么情况下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+浏览器均兼容