Ubuntu 字体在 Firefox 中导致奇怪的选择边框

Question

我在我的项目中使用来自 Google 字体的 Ubuntu 字体。不幸的是，在使用字体时，Firefox 不显示选择/下拉菜单的右边框。

我用 Firefox 创建了一个小提琴 check it out。

相关代码

<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>​

Answer 1

请设置宽度选择/下拉菜单。

Answer 2

尽管这可能不是您正在寻找的答案，一般而言，我尽量避免直接设置 <select> 元素的样式。一种浏览器与另一种浏览器中“采用”的属性似乎差异很大，因此它似乎永远无法正常工作。例如，我在 Chrome 中检查了您的 jsFiddle，下拉列表完全忽略了您的 Ubuntu 字体声明。这就是 Chrome 滚动的方式。

所以，我的建议是在您的样式表中删除 select 的样式，让浏览器做他们的事情。这种方法的结果是用户将在他们的浏览器中获得他们熟悉的下拉列表。

话虽如此，如果你真的需要为下拉菜单设置样式，有一些方法可以基本上用 javascript 劫持 <select> 元素，然后用一堆 div 替换它。我喜欢 Chosen 库来处理这类事情。当它在页面上呈现 <div> 时，您可以根据自己的喜好设置样式。