问题陈述:
用div做一个红点,之前的代码:
.redDott {
width: 0.14rem;
height: 0.14rem;
line-height: 0.24rem;
background-color: #f00;
border-radius: 50%;
margin-left: -0.2rem;
margin-top: 0.12rem;
}
移动端效果图:
放大仔细看会发现,这个红点有点变形了,不是圆形了,而是有点椭圆了,是不是?
测试的时候,发现如果margin-top去掉,红点就不会变形,但是我想让这个红点居中,所以还是想要留住这个属性 。
百度了很多,然后借鉴了别人的方法,试了overflow:hidden;,也试了transform,还试了important提高样式层级,可是我的红点还是没有变 😦
但是,当我尝试着给他加一个边框时,竟然可以了!哈哈 😃
解决方法:
border: 0.02rem solid transparent;
如果你也遇到了同样的问题,希望这篇文章能够帮到你,当然,如果你有更好的方法,欢迎评论区赐教 !!!