IT工程師數位筆記本

在寫移動端項目時，為了將一個元素垂直居中，于是我將元素的高和行高設置成一樣的，但是顯示出來的結果，卻讓人不得其解，如下：

可以看到按鈕的底部有一條縫隙，一開始以為是代碼寫錯了，于是檢查了一下，發現沒啥問題，代碼長下面這樣。

<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元素一樣高了，因為如果子元素沒有設置高度，高度將把行高作為高度，而行高默認繼承的是父元素的行高。

目前所知道的，邊框、行高、字體大小這些都是不支持小數點的。

雖然某些屬性支持小數點，但是非常的不準確，網上說是四舍五入，但不完全是。