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)上都得到了奇怪的输出。请参见下图。

Chrome 图片

Mozilla Firefox 图片

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

除此之外，我正尝试在选择框上放置背景图片，但我做不到

Answer 1

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

http://jsfiddle.net/pYg8v/