css 問(wèn)題, 在firefox瀏覽器下，字體會(huì)頂出容器元素1px？

最近在做了一個(gè)移動(dòng)端頁(yè)面時(shí)遇到此問(wèn)題。

當(dāng)時(shí)自己“精心”設(shè)計(jì)了個(gè)文字容器元素的浮動(dòng)div，并且讓其高度 = 行高 = 字體大小 = 14px，并給了1px的margin-top.由于父節(jié)點(diǎn)高度是16px,因此自己天真地以為文字容器元素上下居中 and 文字上下居中恒成立。由于后面的icon容器高度 = 父節(jié)點(diǎn)高度16px，因此文字和icon就都是垂直居中的了。

但是萬(wàn)萬(wàn)沒(méi)想到測(cè)試時(shí)在android的微信瀏覽器上，留言區(qū)域的用戶名文字會(huì)向上“冒出”1px，導(dǎo)致文字與icon不在一水平線上。而在ios上表現(xiàn)又是正常的。
為了復(fù)現(xiàn)問(wèn)題我把頁(yè)面放到pc上測(cè)試了一下，發(fā)現(xiàn)firefox瀏覽器上文字的表現(xiàn)也是向上冒出1px，而chorome上表現(xiàn)卻正常。

firefox：

chrome:

html代碼：

<div class="msg_item_name">
    <div class="name">微抗1</div> <!--用戶名標(biāo)簽-->
    <span class="tag_teacher"></span> <!--用戶身份icon-->
</div>

css代碼：

.article-detail .msg_item_name{ /*容器元素*/
    margin: 0 0.96rem;
    font-family: 'PingFangSC-Medium', 'Microsoft Yahei';
    letter-spacing: 0.2px;
    font-size: 14px;
    height: 16px;
    line-height: 16px;
    color:#1a1a1a;
    overflow: hidden;
    background:yellow;
}
.article-detail .msg_item_name .name{/*用戶名標(biāo)簽*/
    margin-top: 1px;
    float: left;
    height: 14px;
    line-height: 14px;
}
.article-detail .tag_teacher{ /*用戶等級(jí)icon*/
    float: left;
    margin: 0 0 0 0.0666667rem;
    width: 44px /*1.17333rem*/;
    height: 100%;
    background: url(./images/teacher/icon_teacher3@3x.png) center no-repeat;
    background-size: 100% 100%; 
}

因此特地想請(qǐng)教一下各位該如何解決此問(wèn)題？或者類似圖文并排居中的場(chǎng)景有木有比較好的實(shí)現(xiàn)方法？由于本人經(jīng)驗(yàn)有限試了許多辦法都沒(méi)能解決這個(gè)問(wèn)題，希望大家不吝賜教??！