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中奇怪的选择边框

回答

相关问题