遇到一个BUG,折磨了整整三天,今天解决了,记录一下。
事情经过:测试反应打印预览的时候内容显示不全,并且出现覆盖的情况。而在我自己电脑没有出现这种情况,后来试着升级了我的谷歌浏览器,噩梦开始。
一、具体问题
这个问题,三天时间里,我不断在调试Print的属性和打印样式以及自己的样式,甚至换了多种打印的插件都没有解决,最后请教了一位大佬,和他调试了近一个小时,他提出让我把代码改一改:
-----------------------------错误代码--------------------------------------------------------------------------------
<div class="printingDiv" >
<div id="printingContent" >
<div class="itemBox" v-for="(item, index) in printingContentList" :key="index">
<img :src="item" alt="" class="imgItem">
</div>
</div>
</div>
-----------------------------修改后代码--------------------------------------------------------------------------------
<div class="printingDiv" >
<div id="printingContent" >
<tbody>
<tr v-for="(item, index) in printingContentList" :key="index">
<td class="itemBox"><img :src="item" alt="" class="imgItem"></td>
</tr>
</tbody>
</div>
</div>
改完之后再次点击打印,发现问题解决了,为什么这么改? 我很震惊,大佬跟我说是div互相浮动覆盖,td不会有这种情况只会平铺。
就很懵逼,我页面上打印区域展示出来也没这种情况,到了打印预览里面就乱套了。查了百度也没查明白,还是太菜了。。。