0

以下に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;

 }

しかし、2 つのブラウザーすべて (Mozilla、Chrome) で奇妙な出力が得られます。以下の画像を参照してください。

ここに画像の説明を入力 クロームピクチャー

ここに画像の説明を入力 Mozilla Firefox の画像

誰でもこの問題を解決する方法を教えてもらえますか? クロムの写真は実際には正しいです。パディングも試しましたが、パディングを使用すると、選択ボックスの配列が低下します。

それに加えて、選択ボックスに背景画像を配置しようとしていますが、できません

4

1 に答える 1

1

選択のパディングと、選択の高さを調整してパディングを補うと、うまくいくはずです。

http://jsfiddle.net/pYg8v/

于 2012-08-17T10:25:43.773 に答える