inline-block标签间出现空白的解决方案(4px 8px问题)

最新推荐文章于 2021-10-23 10:34:18 发布

熹小雨Marain

最新推荐文章于 2021-10-23 10:34:18 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： 4px问题 8px问题 inline-block产生空白

本文链接：https://blog.csdn.net/iammarrio/article/details/78366678

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先贴上demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none outside none;
            padding: 16px;
            background: #0a2aee;
            text-align: center;
        }
        ul li {
            display: inline-block;
            *display: inline;
            zoom: 1;
            background: #13fcff;
            padding: 8px;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1列</li>
        <li>第2列</li>
        <li>第3列</li>
        <li>第4列</li>
        <li>第5列</li>
    </ul>
</body>
</html>

从demo运行(谷歌浏览器)效果看来，在inline-block的元素之间存在“8px”的空白：

在IE8-9、Firefox、Safari等浏览器下的效果是4px。下面我们就来说说解决这个'4px'(Chrome下'8px')的几种方法：

方法一：改变HTML结构

结构1：

	<ul>
    	     <li>第1列</li><li>第2列</li><li>第3列</li><li>第4列</li><li>第5列</li>
	</ul>

结构1呢也是用得最多的一种写法。

结构2：

    <ul>
        <li>第1列</li><li>
        第2列</li><li>
        第3列</li><li>
        第4列</li><li>
        第5列</li>
    </ul>

结构2阅读起来稍好

结构3：

    <ul>
        <li>第1列</li
        ><li>第2列</li
        ><li>第3列</li
        ><li>第4列</li
        ><li>第5列</li>
    </ul>

结构3反正我不习惯用，但是这种结构也可以实现

结构4：

    <ul>
        <li>第1列</li><!--
        --><li>第2列</li><!--
        --><li>第3列</li><!--
        --><li>第4列</li><!--
        --><li>第5列</li>
    </ul>

结构4采用的是html的注释的方法，这种方法不常见，但是用起来不错

方法一是通过标签来解决，虽然问题是解决了，但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候，万一遇到标签是后台生成的话，就GG 了。这个时候还可以通过CSS来解决。那么方法2来了。

方法二：负值的margin

    margin-right: -4px;

    margin-right: -8px;
这种方法并不完美，如果你的父元素设置的字体大小不一样，可能你的“-8px”就不能解决问题。况且在Chrome浏览器中你需要另外设置一个负的margin值才能实现同等的效果。当然有的大牛介绍使用"-0.25em"来解决这个问题，也是可以的，都是针对父元素字体大小。

方法三：设置父元素字体大小设置为0

第三种方法设置父元素的字体大小为“0”，然后在“inline-block”元素上重置字体需要的大小。

这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari浏览器下可问题依然存在，所以，方法三也不是最佳的方法，大家自己斟酌。

方法四：不写结束标签

    <ul>
        <li>第1列
        <li>第2列
        <li>第3列
        <li>第4列
        <li>第5列
    </ul>

这种方法其实又回到了方法一，在html标签上动手脚。就是让“inline-block”元素丢失结束标签，这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。

方法五：jquery方法（反正我是不用）

$('.removeTextNodes').contents().filter(function() {
    	return this.nodeType === 3;
    }).remove();

说了这么多，最后咋们来说说最完美的，哈哈。就是用CSS去实现各个浏览器的问题。 就是在父元素中设置font-size:0;用来兼容chrome，而使用letter-space来兼容safari:

letter-spacing: -4px;/*字母间距*/
word-spacing: -4px;/*字间距*/

CODE：

         .solve {
            letter-spacing: -4px;/*这里因为写死的像素，所以当父元素字体大小改变时，适当调整，要不就用em*/
            word-spacing: -4px;
            font-size: 0;
        }
        .solve li {
            font-size: 16px;
            letter-spacing: normal;
            word-spacing: normal;
            display:inline-block;
            *display: inline;/*兼容IE*/
            zoom:1;/*兼容IE*/
        }

祝大家学习愉快，互相学习，壮大咋们大前端的队伍，为祖国的伟大复兴作出我们的贡献，（此处巴巴掌）哈哈~