＆lt; select＆gt;の高さを設定するFirefox 2で

StackOverflow https://stackoverflow.com/questions/1614206

質問

Firefox 2のHTML選択ボックスの高さに奇妙な問題があります。コードを次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

高さは2ピクセル大きくなっています-パディング、フォントサイズ、行の高さは影響を与えないようで、アイデアや見たい場所を使い果たしました。 FF2の選択ボックスの実際の高さは、常にcss height + 2であると仮定する必要がありますか？修正したり回避したりできますか？

役に立ちましたか？

解決

フォームコントロールスタイリングの素晴らしい世界へようこそ。

敗北主義者のように思わずに、あきらめるべきだと思います。フォームコントロールのスタイルに関係なく、常にスタイルを完全に無視するブラウザが存在します。 SafariはほとんどのCSSを無視すると信じています。 456 Berea Streetの「選択要素のスタイリング」を参照してください。

Javascriptを使用する代替手段があります- jQuery UI には、select要素に似たウィジェットがいくつかあると思います。この jQueryクリックメニューを使用して、次の値を設定する関数を添付することもできます。非表示の入力フィールド。私はこれを以前にやったことがあり、うまく機能します。これらの種類は、サイズと外観を完全に制御できる唯一の方法です。

他のヒント

一部のブラウザのデフォルトが動作している場合があります。 CSSをリセットしてから適用するidあなたのスタイル？まだ2pxオフですか？

CSSを使用してスタイルを設定してください。 jquery / javascriptを採用します。

独自の画像を作成し、それらの画像のクリックイベントを使用して、実際のフォーム入力を切り替えます。これらのフォーム入力は、コンテナスタイルのdisplay：noneにある必要があります。このように、あなたが望むようにそれを設計することができます。

このトピックに関する優れた記事を次に示します。 http：//www.noupe。 com / css / form-elements-40-cssjs-styling-and-functionality-techniques.html

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top