CSS中文字体意外下沉问题

Question

我在写一个移动端导航列表的时候遇到了这个奇怪的问题，

先上问题吧

我的高亮热无法与导航中的热进行一个对齐，而所有的英文都是可以正常对齐，只有这一个中文有问题

我的结构是这样的，所有的Li都是循环渲染出来的，内部的字符是导航中的，span包裹的是高亮

接下来是样式

非常的奇怪就在于只有中文有这个问题，在不修改任何样式的情况下，只要我把热字（导航中的热）改成任意英文 问题立马就解决了（直接在开发者工具修改HTML）

所以各位能不能给点思路，应该不太可能是中英文基线不同的问题吧，差异不该这么大

Answer 1

和中文字体没有关系,应该是你的css写法有问题.右侧没有指定height和line-height并多了padding:3px;也就是默认高度了.左侧写得挺奇怪:height:24px;而line-height:10px;还position:absolute.却又不指定left;top;你如果左右:height:24px;line-height:24px;左:font-size:21px;;position:absolute;left:0;top:3px;右:font-size:12px;padding:3px;我想是没有问题的.另外如果雅黑之类的字体,font-size最好是21px;顺便指定font-size:400|700;