全球主机交流论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

CeraNetworks网络延迟测速工具IP归属甄别会员请立即修改密码
查看: 459|回复: 6
打印 上一主题 下一主题

为什么CSS里同字号,Firefox显示出来比Chrome小?

[复制链接]
跳转到指定楼层
1#
发表于 2021-12-3 09:56:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 电光 于 2021-12-3 10:02 编辑

CSS是这样写的:

  1. :root {
  2. --bs-body-font-size:0.875rem;
  3. }


  4. font-size: var(--bs-body-font-size)
复制代码


控制台里看,Firefox和Chrome解析出来都是 14px,

可是实际显示效果Firefox的比chrome要小,如果Chrome显示的是14px的话,Firefox显示的也就是Chrome中的12PX

效果如下图

Chrome

2.jpg (15 KB, 下载次数: 0)

Firefox

1.jpg (9.85 KB, 下载次数: 0)
推荐
发表于 2021-12-3 10:03:52 | 只看该作者
Chrome最小只支持12px,其他浏览器支持更小
想要Chrome支持小于12像素只能用css的镜像缩放   比如22的50% 就是11px了
推荐
发表于 2021-12-3 10:02:41 | 只看该作者
缩放或者是尺寸问题吧,既然Firefox和Chrome渲染出的都是一样的,你可以试试换一种写法再试试?或者你弄个页面 就单纯写font-size: 14px; ,看看两个浏览器是不是一样的大小?我没用过Firefox,一直用的都是Chrome
2#
发表于 2021-12-3 09:57:35 | 只看该作者
缩放了是不

点评

检查了,没有。  发表于 2021-12-3 09:58
5#
 楼主| 发表于 2021-12-3 21:40:09 | 只看该作者
本帖最后由 电光 于 2021-12-3 21:45 编辑
CMBCHINA 发表于 2021-12-3 10:03
Chrome最小只支持12px,其他浏览器支持更小
想要Chrome支持小于12像素只能用css的镜像缩放   比如22的50%  ...

@v233 发表于 2021-12-3 10:02
缩放或者是尺寸问题吧,既然Firefox和Chrome渲染出的都是一样的,你可以试试换一种写法再试试?或者你弄个 ...


破案了,是因为bootstrap默认font-family的原因,chrome和firefox对这个字体集的英文字体渲染结果不一样。渲染出来的英文的在firefox下面就小一号,中文的大小不受影响。

把foundation的字体集抄过来替换上就好了。

bootstrap官方网站也存在这个问题,因为也是用bootstrap搭建的。
6#
发表于 2021-12-3 22:39:51 | 只看该作者
电光 发表于 2021-12-3 21:40
破案了,是因为bootstrap默认font-family的原因,chrome和firefox对这个字体集的英文字体渲染结果不一 ...

恭喜恭喜,bootstrap现在用的少了,zui这个新儿子发现倒挺不错的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|全球主机交流论坛

GMT+8, 2025-10-31 05:43 , Processed in 0.070963 second(s), 17 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表