inline-block元素的4px空白间距解决方案

2020-04-27 07:45:27易采站长站整理

最后在给大家提供一种jquery的方法:

HTML Markup

复制代码
<ul class=”removeTextNodes” >
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

CSS Code

复制代码
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}

jQuery Code

复制代码
$(‘.removeTextNodes’).contents().filter(function() {
return this.nodeType === 3;
}).remove();

最后一种方法是通过jQuery来改变“nodeType”的值,从而实现我们需要的效果。

上面讲述了多种方法,但要兼容多个浏览器版本,并不每种方法实用,以前常用的方法,这次测试并不兼容所有浏览器。要做到兼容所有浏览器,个人认为还是在html的标签上做一定的处理,或者采用最后一种方法,通过“jQuery”来改变“nodeType”值达到效果。针对这个“inline-block”之间的间距有几篇文章做过介绍,但里面的方法,和上面介绍的测试的基本一样,具体如何运用,大家还是根据自己的需求进行选择或处理。
那么有关于“inline-block”的间距如何去除,今天就扯到这了,希望这篇文章对喜欢用inline-block的童鞋有所帮助。如果您有更好的方法,记得与我们一起分享,欢迎在下面的评论中留下您的经验,或者指正上面的不对之处。

更新:全兼容的样式解决方法

经过高人指点,使用纯CSS还是找到了兼容的方法,就是在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:

复制代码
.finally-solve {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}