版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88418586
这里截图为例说明一则bug，请bug对号入座。
页面的栅格缩放，导致页面布局发生叠加错位？
一、坑1 · 引言： （先来一则bug代码）
<el-card v-for="(resume,key) in resumes" :key="key" class="item" shadow="hover">
<el-row>
<el-col :span="4">
<div class="box1">
<div class="pic" v-if=" resume.sex === 'M'">
<img src="../../../static/images/default-gg.png" class="thumb-hd">
</div>
<div class="pic" v-else-if="1===1">
<img src="../../../static/images/default-mm.png" class="thumb-hd">
</div>
<p class="clr-1a">{{resume.resumeName}}</p>
</div>
</el-col>
<el-col :span="8">
<div class="box2">
<p class="clr-1a">{{resume.jobIntention}} {{resume.salaryExp}}K {{resume.jobWantedState}}</p>
<p class="clr-666">{{resume.seniority}}年 {{resume.location}} </p>
<p class="clr-b2">{{resume.education}} {{resume.birthday}}岁 {{(new Date(resume.updateDate)).getMonth()+1}}月{{(new Date(resume.updateDate)).getDate()}}日 {{(new Date(resume.updateDate)).getHours()}}时</p>
</div>
</el-col>
<el-col :span="10">
<div class="box3">
<!-- 注释1： 注意查看下面的特殊字符 &npsp; -->
<p class="clr-1a"> <span class="pull-r">{{resume.phone}}</span> </p>
<p class="clr-555">{{resume.remarks}}</p>
</div>
</el-col>
<el-col :span="2" class="pos-rel">
<div class="button pos-abl">
<div class="btn1"> <el-button type="primary" size="" plain @click="open3">举报</el-button></div>
<!-- <div class="btn2"> <el-button type="primary" size="" plain @click="open2">收藏</el-button></div> -->
</div>
</el-col>
</el-row>
</el-card>
注意上面的代码：
【注释1】部分的&npsp;，因为有该特殊字符，所以页面style样化在自动缩放的时候局部出现了紊乱的布局bug。
解决办法：
- 只需要将它删除就没有了。
二、坑2 · （再来第二则bug）
问题描述：
- 单页面
.vue文件的<style>样式：如果它没有设置 <style scoped>（scoped 约束仅对当前页面样式有效），那么在你访问了同样class定义规则的相关页面之后返回，也会有可能造成目标页这样的bug !
解决办法：
- 出现这样的异常bug，就需要你自己研究一下css的优先级，自己去解决了。
这个没有什么经验，不再赘述，请留意。
三、坑3 · 最坑（再来第三则bug：一般不会出现这个问题!）
问题描述：
- vuejs的编译打包会把一些css类重新定义封装（傻坑！）
解决办法：
- 出现这样的异常bug，就需要你自己研究一下css的编译方式，自己去找寻方法解决了，后期有什么经验，会继续补充，请留意。
以上就是关于“ element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？ ” 的全部内容。