封装的抽屉组件需要一个滑入滑出效果,因此在封装的时候使用的css3的transform: translate(),通过插槽的显示插入div,但此时div内的h3和p标签的字体偶尔会出现模糊效果。
- 出现原因:
h3和p的margin-bottom默认为奇数 - 解决办法:
保证装字体的容器(盒子)宽高为正整数并为偶数
<Drawer isArrow :isVisible="isVisible"><div class="Al"><h3>xxxx</h3><p>xxxx</p></div><div class="Capture"><h3>xxxx</h3><p>xxxx</p></div><div class="Desc"><h3>xxxx</h3><p>xxxx</p></div>
</Drawer>
.Al,
.Capture,
.Desc {
h3 {font-weight: 900;margin-bottom: 10px;
}
p {margin-bottom: 10px;}
}