さまざまなブラウザでの互換性の問題を選択_html/css

各ブラウザーの select タグの属性と各ブラウザーのサポートは若干異なるため、ブラウザーごとに選択ボックスの表示が異なることがわかっています。

以下では、主要な CSS プロパティをサポートすることにより、完全に互換性のある選択範囲を作成します。

制御変数メソッドを使用して、各ブラウザーの 3 つの状況で選択の高さ、パディング、および行の高さをテストするデモを作成しました: height.100.padding.0、height.no.padding.100、no. .no.padding、結果は以下の図に示されています:

次の調査属性を取得できます

上記の調査結果属性の概要を通じて、IE6 には固定高さ no があることがわかります。どのように設定しても 22px は変化せず、Safari 以外の他のブラウザは height 属性をサポートしているため、height: 22px を設定します。ここで、safari ブラウザを変更します。line-height 属性をサポートしているのは safari だけであることがわかり、フォントサイズが 12 ピクセルであるという前提で、line-height を使用して高さを 22 ピクセルに修正できます。 18pxなので、Safariのセレクトボックスの高さも22pxになります。最後に、FF と IE9 のテキストは中央揃えではありませんでした。padding: 2px0 を設定すると、FF と IE9 の両方で中央揃えになることがわかりましたが、各ブラウザーの選択の高さは増加しませんでした。高さ設定について少数の数字を詰めても全高が上がらない場合は？この設定の後、これらのブラウザでの選択の高さは 22 ピクセルになります。

以下は完全に互換性のあるコード例です。

< htmlxmlns="http://www.w3.org/1999/xhtml">

無題ドキュメント

さまざまなブラウザでの互換性の問題を選択_html/css_WEB-ITnose