【BUG】移动端元素间出现间隔

问题：

列表有个吸顶，在移动端上发现表现的很奇怪，有一条缝。

过程

在chrome中查看filter-mask和filter-container发现这两个盒模型是一致的

filter-mask filter-container

但是在手机中查看却大大不同

filter-mask filter-container

可以看到移动端上filter-mask和filter-container缺了一块，这就是导致bug的原因；
看一下这的dom以及css,当filter-mask需要吸顶是会添加tab-fixed类.

<div id="filter-mask"class="filter-mask">
    <div class="filter-container">
      // ... 一些下拉筛选的内容
    </div>
</div>

<style type="text/css">
.filter-mask{
    width: 100%;
}
.tab-fixed{
    position: fixed;
        top:0;
    z-index:99;
}
.filter-container{
    width: 100%;
    display: inline-block;
    font-size: 28px;
}

</style>

经过排查确定高度的差异不是由于filter-container内容物导致的，所以排查点聚焦到了filter-mask和filter-container自身上；

可以看到filter-mask被撑大了，这种奇怪的空隙让我联想到之前ul li标签写模板是出现的空隙，接下来尝试下 给父级filter-mask设置font-size：0, 之后查看发现显示恢复正常，filter-mask和filter-container宽高一致； 和在chrome上看到的效果一致；

此时基本上就很接近真理了，我们将dom做下修改

<div id="filter-mask"class="filter-mask"><div class="filter-container">
      // ... 一些下拉筛选的内容
    </div>
</div>

没看错，只是将两个dom间的格式化抛弃，之后在手机上查看效果，发现展示恢复正常。

结论

此次问题是由于代码自动格式化的时候，往往有一些缩进、换行，当元素的display为inline或者inline-block时，这些缩进、换行就会产生空白，导致问题。
所以以下的方法均使用修复此次问题：

• 1. 使dom紧贴着没有格式化(不推荐)
• 2. 将子集filter-container的display: inline-block;移除 (视情况而定，在此情景下可移除)；
• 3. 给子集级filter-mask设置float：left/right (不太推荐，浮动可能会有影响)；
• 4. 将父级filter-mask设置font-size：0；（推荐，影响最小，子集记得重新设置font-size）

====以上====

贴个相关文章 ： https://⭐️ css-tricks.⭐️ com/fighting-⭐️ the-space-between-inline-block-elements/ （去掉⭐️ ）

像这篇文章说的

This isn’t a “bug” (I don’t think). It’s just the way setting elements on a line works.

确实有其合理性，根据需求去处理就阔以啦