html - 选择框文本在 Firefox 中处于顶部

Question

我在下面有一个 HTML 代码。

<div style="height:300px; width:300px; background:#000 ">
 <div style="padding:30px">
   <select id="keywordsearch" class="upperslect">
       <option value="1">ABC</option>
       <option value="2" >Def</option>
       <option value="3" selected="selected">Select Box</option>
       <option value="4">GGGG</option>  
    </select>
  </div>
 </div>

下面的CSS是

.upperslect 
{ 
    font-family:Tahoma; 
    color:#6C6C6C;
    border: none; 
    background:#FFFFFF; 
    font-family:Arial; 
    font-size:12px; 
    width:155px; 
    height:26px;
    margin:0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

 }

但是我在所有两个浏览器（Mozilla，Chrome）上都得到了奇怪的输出。请参阅下面的图片。

铬图片

Mozilla 火狐图片

谁能告诉我如何解决这个问题。镀铬图片实际上是正确的。我也尝试过填充，但填充选择框数组正在下降。

除此之外，我试图在选择框上放置背景图像，但我无法

Answer 1

选择上的一些填充并调整选择高度以补偿填充应该可以解决问题：

http://jsfiddle.net/pYg8v/