Ubuntu字體導致Firefox中奇怪的選擇邊框

我在我的項目中使用Google字體中的Ubuntu字體。不幸的是，當使用字體時，Firefox不顯示選擇/下拉的正確邊界。Ubuntu字體導致Firefox中奇怪的選擇邊框

我用Firefox創建了一個小提琴check it out。

Border disappearing in Firefox

相關代碼

<link 
    href="http://fonts.googleapis.com/css?family=Ubuntu" 
    rel="stylesheet" type="text/css" /> 

<style> 
    input, textarea, select, span 
    { 
     font-family: 'Ubuntu' , sans-serif !important; 
     font-size: 13px; 
    } 
</style> 

<span>Some text to show that the font is indeed in use</span> 
<br /> 
<select name="testSelect" id="testSelect"> 
    <option value="1">1</option> 
    <option selected="selected" value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    <option value="11">11</option> 
    <option value="12">12</option> 
</select>

來源

2012-05-11 Germstorm

我可以在我的Firefox中看到合適的邊框。 –

顯然，在某些FF瀏覽器中，它呈現正確，在某些它不 – Germstorm

請設置寬度選擇/下拉菜單。

來源

2012-05-11 12:57:53 ShibinRagh

不幸的是，我不能設置一個確切的寬度，但我會嘗試最小寬度 – Germstorm

也沒有寬度，也沒有最小寬度的幫助。一些選擇仍然缺少他們的右邊界。 – Germstorm

請張貼您的網站網址 – ShibinRagh

儘管這可能不是你正在尋找的答案，一般，我儘量避免造型<select>元素直接。在一個瀏覽器中與另一個瀏覽器相比，「採取」哪些屬性似乎差異很大，所以它似乎從未正常工作。例如，我在Chrome中檢查了你的jsFiddle，下拉菜單完全忽略了你的Ubuntu字體聲明。 Chrome瀏覽器就是這樣推出的。

因此，我的建議是刪除樣式表中的select的樣式，並讓瀏覽器執行它們的操作。這種方法的結果是用戶會在他們的瀏覽器中得到一個他們熟悉的下拉菜單。所有這一切說，如果你真的需要一個下拉式樣，有基本上用javascript來劫持<select>元素，並用一堆div取代它的方法。我喜歡Chosen庫這種事情。由於它在頁面上呈現<div>，因此您可以將這些內容設置爲您心中的內容。

來源

2012-05-11 14:18:31 chipcullen

除了字體，我根本沒有造型的選擇。不幸的是我在這種情況下，因爲我必須設置字體。感謝您選擇圖書館的想法！ – Germstorm

Ubuntu字體導致Firefox中奇怪的選擇邊框

回答

相關問題