Css 不同的材质图标样式不对齐

我在我的应用程序中使用谷歌的材料设计图标。目前至少需要两种样式：常规（填充）图标和轮廓图标。问题是，这两种样式不对齐

如果您查看此输出，则常规图标和轮廓图标位于不同高度，原因不明。通过在检查器中检查它们，您可以看到边界框确实不同（对于轮廓图标，它们似乎比需要的要低）

。图标{
垂直对齐：中间对齐；
}

人
人
家
主页

您可以使用flex（甚至网格）将它们居中对齐

。图标包装器{
显示器：flex；
对齐项目：居中；
}

人
人
家
家

您可以使用flex（甚至网格）将它们居中对齐

。图标包装器{
显示器：flex；
对齐项目：居中；
}

人
人
家
家

在片段中是否对齐？@Pete Oops！似乎只能在我的电脑（Windows 8.1）上复制。在Windows 10上，它们是一致的。可能需要升级-Windows去年停止了对8.1的主流支持year@Pete我们的一些用户仍然安装了Windows 8（或8.1）。虽然这不是一个很大的分数，但让网站在他们看来也不坏也很好。在片段中是否对齐？@Pete Oops！似乎只能在我的电脑（Windows 8.1）上复制。在Windows 10上，它们是一致的。可能需要升级-Windows去年停止了对8.1的主流支持year@Pete我们的一些用户仍然安装了Windows 8（或8.1）。虽然这并不是一个很大的分数，但对他们来说，让网站看起来不坏也不错。