字体加粗后,浏览器兼容问题

一段文字,字体加粗后,在360安全浏览器极速模式下加粗字体高度增加了3个像素。
显示图片如下:
360安全浏览器极速模式:
图片描述
网页渲染

图片描述
360盒子

谷歌浏览器:
图片描述
网页渲染

图片描述
谷歌盒子

css代码:

.title{
  display: block;
  width: 232px;
  font-size: 18px;
  font-family: microsoft yahei;
  color: #4B4847;
  padding: 15px;
  padding-bottom: 10px;
  border-radius: 15px;
  background: #F5B27F;
  margin-bottom: 7px;
  font-weight: bold;
  box-sizing: border-box;
}

取消字体加粗后高度就一直了,请问这是什么问题?

阅读 4.9k
1 个回答

谢邀,这是两个浏览器对行高的解析问题,可以把行高写死避免一下兼容性问题
比如

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