360浏览器极速模式下同一个p标签内的字大小不一样,如何解决?

问题描述

一个网页,在chrome以及360兼容模式下显示正常,但是在360极速模式下会出现同一个p内字体大小不一样的情况,甚至在更换字体的情况下一个字左右两部分都会显示不正常
chrome下

clipboard.png

360极速模式下(治疗两个字不正常)

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

只有在360极速模式下出现,尝试过修改字体大小以及更换字体,效果都不好,甚至出现一个字两部分不一样的情况
图片中的“即”字两边大小不一样。

clipboard.png

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<li>
    <a href="/index/Product/index/nav/4/id/3.html"><p>RH-I光脉冲干眼治疗仪</p></a>
</li>
ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
    /* font-family: Noto Sans SC; */
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

你期待的结果是什么?实际看到的错误信息又是什么?

期待字体显示正常


根据一楼回答特意更新渲染后字体的截图
chrome

clipboard.png

360下

clipboard.png

阅读 3.3k
2 个回答

我觉得应该是使用衬线字体和非衬线字体差异导致的。用代码还原不出来。你看一下不同渲染结果实际使用的字体类型吧

你自己都截图了,一个16 glyphs一个12 glyphs,一样就怪了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题