Firefox 中的字体图标显示问题
Posted
技术标签:
【中文标题】Firefox 中的字体图标显示问题【英文标题】:Font icon display issue in Firefox 【发布时间】:2022-01-24 00:31:31 【问题描述】:该图标在我的 Firefox 中不显示在中心,但在 Opera 中可以使用。
body
height: 100vh;
display: grid;
place-items: center;
.link
background-color: red;
padding: 3px;
display: grid;
place-items: center;
text-decoration: none;
color: initial;
i
background-color: #fff;
font-size: 2rem;
<head>
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<a href="#" class="link">
<i class='bx bx-home'></i>
</a>
您的 Firefox 是否遇到过以下问题?
This one is screenshot from Opera
And this one is Firefox
===================编辑====================
run code snippet in Firefox
run code snippet in Opera
我的 Firefox 版本是95.0.2
(目前最新版本)。
如何在 Firefox 中解决此问题?
【问题讨论】:
【参考方案1】:遗憾的是,我无法复制您的问题,但我建议您并排打开两个浏览器,打开您的开发工具,打开元素,然后您可以检查 css 属性以检查是否添加或缺少某些内容在 Firefox 中,您可能需要一些特定于 Firefox 的样式来解决问题。
就我个人而言,我没有与place-items
合作过,但在 caniuse.com 上查看它看起来应该不会给您带来任何问题。但可能值得遍历所有 html/css 以查看您是否使用了您正在使用的 Firefox 版本不支持的任何内容。
https://caniuse.com/?search=place-items
【讨论】:
以上是关于Firefox 中的字体图标显示问题的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Firefox 中显示 Font Awesome 图标?
bootstrap中的font awesome图标在firefox下显示不正常