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>时，您可以根据自己的内容设计这些内容。