当font-family为英文字体时，float后&nbsp与中文字体对不齐

Question

当font-family为英文字体时，float后&nbsp与中文字体对不齐
把font-family改为中文字体或把&nbsp改为中方就可以对齐，
这是什么原理呢？

        body{
            font-size: 12px;
            font-family: Arial;
        }
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
            float: left;
        }
        ul{
            list-style: none;
        }
        div{
            float: left;
            margin-right: 10px;
            border-bottom: 2px solid red;
        }
        .a{
            width: 200px;
        }
        
    <div><a href="">我人有遥</a></div>
    <div><a href="">寺一上</a></div>
    <div><a href="">要地上</a></div>
    <div class="a"><a href="">&nbsp;&nbsp;&nbsp;</a></div>

Answer 1

设置一下他们拥有相同的line-height试试,
line-height不行的话，可以试试height

Answer 2

不要纠结这个nbsp了，给div加两个属性即可，height:20px;line-height:20px;

Answer 3

附图
chrome 60.0.3112.90 下可以，求问lz的浏览器以及版本？