浏览器对CSS⼩数点的解析——坑
在写移动端项⽬时，为了将⼀个元素垂直居中，于是我将元素的⾼和⾏⾼设置成⼀样的，但是显⽰出来的结果，却让⼈不得其解，如下：
可以看到按钮的底部有⼀条缝隙，⼀开始以为是代码写错了，于是检查了⼀下，发现没啥问题，代码长下⾯这样。
<footer>
<a href="javascript:;" class="submit">提交订单</a>
</footer>
footer {css去掉滚动条
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: .539rem;
line-height: .539rem
}
footer a {
display: block;
text-align: center;
font-size: .188rem;
color: #fff;
background-color: #0fb8a8;
}
检查代码没有问题后，⽤浏览器审查元素查看了⼀下按钮的⼤⼩（其实是先审查元素再看的代码），发现这个按钮的⼤⼩和我设置的不⼀样，如下图
footer的⾼
a的⾼
a元素的⾼，⼩数点没了，⽽footer元素的⾼却有⼩数点，经过观察，是⾏⾼造成的，以下是我将⾼度去掉以后的结果
将⾼度去掉以后，a和footer就⼀样⾼了，最后总结出来就是⾏⾼不⽀持⼩数点，⽽⾼度⽀持，⽽这⾥之所以会有那条缝隙就是因为⾏⾼没有占满整个⾼度，所以就留出来了⼀点空⽩。
想解决这个问题也很简单，就是不要去写⾼度，或者给a元素添加⼀个height:100%；这样a元素就和footer元素⼀样⾼了，因为如果⼦元素没有设置⾼度，⾼度将把⾏⾼作为⾼度，⽽⾏⾼默认继承的是⽗元素的⾏⾼。
⽬前所知道的，边框、⾏⾼、字体⼤⼩这些都是不⽀持⼩数点的。
虽然某些属性⽀持⼩数点，但是⾮常的不准确，⽹上说是四舍五⼊，但不完全是。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。