不管瀏覽器的字體如何有一個固定的字體大小？

我在（引導）導航欄，菜單圖標和搜索圖標兩種字體圖標：不管瀏覽器的字體如何有一個固定的字體大小？

<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。如果您爲它們設置了背景顏色，則清晰可見。

如何避免這種字體差異？

來源

2017-04-11 Slim Shady

您測試過哪些瀏覽器？ –

我已經測試過樣式，但找不到差別;-)。有更多的風格影響你的原創風格嗎？你有小提琴或鏈接？ – dutchsociety

@LukasA嗯，我已經測試了CM瀏覽器和手機上的默認瀏覽器，然後我在筆記本電腦上試過Chrome（我知道，爲什麼筆記本電腦上有菜單圖標？）。他們都有不同的字體大小。 –

，如果你還沒有準備好，可以嘗試使用在您％body元素的字體大小，如：

body { 
    font-size: 100%; 
}

的EM大小設置，請參考這個值，這可能不是除非你指定它，否則每個瀏覽器都是一樣如果你這樣做，你的em值應該在所有瀏覽器中保持一致。

有關於這一個很好的文章（以及線高度）位置：https://alistapart.com/article/howtosizetextincss

這是否解決問題了嗎？

來源

2017-04-11 10:09:45 MikkelTN

我確實嘗試過使用px，％和em，但仍然是一樣的。 –

如果可能的話，我會使用背景圖像圖標代替字體圖標，以避免字體大小問題。

來源

2017-04-11 11:22:35

是的，這應該工作，但搜索圖標怎麼樣？我想問題來自導航欄。 Bootstrap將導航欄的高度設置爲大約50px，這可能是爲什麼高度不隨字體降低的原因。 –

不管瀏覽器的字體如何有一個固定的字體大小？

回答

相關問題