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

2018-02-12 10:46:34来源:http://www.jackpu.com/ji-ci-inline-block-zai-mo-ban-xuan-ran作者:jackpu人点击

分享

最近在做 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 %}

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


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台