Question

我在（Bootstrap）导航栏中有两个字体图标，一个菜单图标和一个搜索图标：

<div class="menu-icon">
    <i class="fa fa-bars"></i>
</div>
<div class="navbar-brand">
    Website
</div>
<div class="search-icon">
    <i class="fa fa-search"></i>
</div>

CSS：

.menu-icon {
    float: left;
}

.search-icon {
    float: right;
}

.menu-icon, .search-icon {
    font-size: 1.6em;
    padding: .6em 1em;
    cursor: pointer;
    background: #f55;
}

这适用于一个浏览器但不适用于其他浏览器，因为它们有自己不同大小的字体，也可以在其设置中更改。

不同浏览器的大小差异需要不同的填充或font-size。如果为它们设置背景颜色，则清晰可见。

如何避免这种字体差异？

Answer 1

如果可能，我会使用背景图片图标而不是字体图标来避免字体大小调整问题。

Answer 2

如果您还没有，请尝试以％为单位指定body元素的字体大小，例如：

body {
  font-size: 100%;
}

您设置的em大小，请参考此值，除非您指定它，否则在每个浏览器中可能不相同。如果这样做，您的em值应该在所有浏览器中保持一致。

这里有一篇很好的文章（以及行高）：https://alistapart.com/article/howtosizetextincss

这会解决您的问题吗？

无论浏览器的字体如何，如何使用固定的字体大小？

2 个答案: