Firefox 中的字体图标显示问题答案

【问题标题】：Font icon display issue in FirefoxFirefox 中的字体图标显示问题
【发布时间】：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 中解决此问题？

【问题讨论】：

标签： css firefox icons

【解决方案1】：

遗憾的是，我无法复制您的问题，但我建议您并排打开两个浏览器，打开您的开发工具，打开元素，然后您可以检查 css 属性以检查是否添加或缺少某些内容在 Firefox 中，您可能需要一些特定于 Firefox 的样式来解决问题。

就我个人而言，我没有与place-items 合作过，但在 caniuse.com 上查看它看起来应该不会给您带来任何问题。但可能值得遍历所有 html/css 以查看您是否使用了您正在使用的 Firefox 版本不支持的任何内容。

https://caniuse.com/?search=place-items

【讨论】：