浏览器对换行符理解造成内联排列产生间距的原因和解决办法

比如这样一段代码

1
2
3
4
<li>
<img src="image/file.png">
<span>task0002</span>
</li>

并未设置间距,但在浏览器下却有间距。

产生原因

并不是因为浏览器把换行符当成文本节点所以产生了间距。因为使用 li.childNodes 可以看出:

IE6 IE7 IE8 都会忽略换行符,不会认为是一个文本节点,但是这不会影响IE系列浏览器把标签间的换行符留出间距;

其他的浏览器不仅把标签间的换行符当成文本节点,并且还在标签之间留出间距。

解决办法

最简单的解决办法当然是直接把产生间距的内联元素放到同一行,就像这样:

1
2
3
4
// 方法一,都写在一行
<li>
<img src="image/file.png"><span>task0002</span>
</li>

然而,如果内联元素很多呢,这样书写太长不便于阅读,那么也可以这样:

1
2
3
4
5
6
7
// 方法一,闭合标签内换行
<li>
<span>task0001</span
><span>task0002</span
><span>task0003</span
><span>task0004</span>

</li>

因为它是在闭合标签内换行,而不是不在标签之间换行,这样的换行符不会造成标签间的空白间隙。

当然,你可能觉得这样不够优雅,那么,再来一种方法:

1
2
3
4
5
6
7
8
9
10
11
12
// 方法三,用 float
<style>
li {
display: inline;
float: left;
}
</style>

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

设置 float 可以完美消除间距。

参考:内联排列的间距 和 浏览器对换行符理解成文本节点的原因研究

坚持原创技术分享,您的支持将鼓励我继续创作!