ホームページ >ウェブフロントエンド >htmlチュートリアル >Select の最適なプリセットは、すべてのブラウザと完全に互換性があります select_HTML/Xhtml_Web ページ制作

Select の最適なプリセットは、すべてのブラウザと完全に互換性があります select_HTML/Xhtml_Web ページ制作

WBOYオリジナル: 2016-05-16 16:40:431301ブラウズ

各ブラウザーの select タグの属性と各ブラウザーのサポートは若干異なることがわかっており、そのためセレクトボックスの表示がブラウザーごとに異なります。次に、メインの外観 CSS をサポートすることにより、完全に互換性のある select を作成します。属性。
制御変数を使用して select の高さ、パディング、行の高さを制御し、各ブラウザーで 3 つの状況をテストするデモを作成しました: height.100.padding.0、height.no.padding.100、no。 height.no.padding を実行すると、結果は各ブラウザのリンク画像の通りです DEMO の外観

以下の調査属性を取得できます。

	ie6	ie7	ie8	ie9	ff	ち	SF	オプ
デフォルトの高さ	22px	22px			19px	20px	19px	19px
身長	ふ	た	た	た	た	た	ふ	た
パディング	ふ	ふ	た	た	た	た	ふ	た
行の高さ	ふ	ふ	ふ	ふ	ふ	ふ	た	ふ
テキストを垂直方向に中央揃え	た	た	た	ふ	ふ	た	た	た

上記の調査結果の属性の概要から、IE6 の高さはどのように設定されても 22px に固定されていますが、Safari を除く他のブラウザーは高さ属性をサポートしていることがわかります。そのため、height:22px を設定します。そこで、safari ブラウザを変更すると、safari だけが line-height 属性をサポートしていることがわかりました。そのため、line-height を使用して高さを 22px に修正し、font-size が次のとおりであるという前提で line-height: 22px を設定します。 12px、最後に FF と IE9 のテキストは中央に配置されません。パディング: 2px 0 を設定します。FF と IE9 の両方が中央に配置されることがわかりましたが、各ブラウザーの選択の高さは増加していません。高さの設定で、少数の数字をパディングしても全体の高さが増加しない場合があります。
以下は完全に互換性のあるコード例です。

コードをコピー

コードは次のとおりです: