浏览器对CSS小数点的解析——坑

在写移动端项目时，为了将一个元素垂直居中，于是我将元素的高和行高设置成一样的，但是显示出来的结果，却让人不得其解，如下：

可以看到按钮的底部有一条缝隙，一开始以为是代码写错了，于是检查了一下，发现没啥问题，代码长下面这样。

<footer>
    <a href="javascript:;" class="submit">提交订单</a>
</footer>
footer {
    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元素一样高了，因为如果子元素没有设置高度，高度将把行高作为高度，而行高默认继承的是父元素的行高。

---

目前所知道的，边框、行高、字体大小这些都是不支持小数点的。

虽然某些属性支持小数点，但是非常的不准确，网上说是四舍五入，但不完全是。