ribbon image search rewind fast-forward speech-bubble pie-graph star

记一次 inline-block 在模板渲染引起的异常

最近在做 nunjacks 的 模板替换工作。然后在做 {% for %} 的时候遇到一个问题:

{% for item in episodes %}
<div {{ item.itemAttr }} class="{{ item.itemClass }}">  
     <a href={{ item.url }}>{{item.name}}</a>
</div>  
{% endfor %}

其中 div 设置的样式是通过 display: inline-block; 也就是渲染一个普通的列表:

然而,在实际过程中,我们却看到变成 四个一行的,但是看过样式的距离,算出盒子理论每行确实应该容纳五个 div

然后查看 Chrome ,并没有发现异常,所以楼主当时心情:

两天纠结之后,重新排查这个问题,用 firefox 审查:

什么 🙄🙄🙄🙄?????

空格啊???

我们知道设置 inline-block 没有设置 float 的话,按照常规渲染 ,空格是会占据一定像素空间的;所以,我们如果光看样式是看不出来问题的。

由于我们使用了模板渲染,因此你的 {%for%} 的使用这之间的空格也会渲染出来的,目的其实是为了格式更容易看。因此解决这个问题也非常容易:

{% for item in episodes %}<div {{ item.itemAttr }} class="{{ item.itemClass }}">
     <a href={{ item.url }}>{{item.name}}</a>
</div>{% endfor %}  

但是这样写的话,渲染后格式就不是阅读友好了。

You Can Speak "Hi" to Me in Those Ways