すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選択ボックスの表示が異なっていることがわかっています。次に、主要な外観 CSS プロパティをサポートすることで、完全に互換性のある選択を作成します。
選択項目の高さ、パディング、行の高さのデモを作成し、さまざまなブラウザで 3 つの状況をテストしました。height.100.padding.0、height.no.padding.100、no.height.no.padding です。結果はリンクされた画像に示されています。各ブラウザのデモの外観

以下の研究特性を導き出すことができます。

	IE6 について	IE7 の	8 です	IE9 について	ff	ch	sf	オプ
デフォルトの高さ	22ピクセル	22ピクセル			19ピクセル	20ピクセル	19ピクセル	19ピクセル
身長	ふ	T	T	T	T	T	ふ	T
パディング	ふ	ふ	T	T	T	T	ふ	T
行の高さ	ふ	ふ	ふ	ふ	ふ	ふ	T	ふ
テキストを垂直に中央揃え	T	T	T	ふ	ふ	T	T	T

上記の調査結果の属性まとめから、IE6 では設定方法に関係なく高さが 22px に固定されていること、Safari 以外のブラウザでは height 属性をサポートしていることがわかったので、height:22px を設定します。次に、Safari ブラウザを修正します。line-height 属性をサポートしているのは Safari のみであることがわかったので、line-height を使用して高さを 22px に修正できます。font-size が 12px であることを前提として、line-height:22px を設定します。最後に、FF と IE9 のテキストは中央揃えになりません。padding:2px 0 を設定します。FF と IE9 は中央揃えになっていますが、各ブラウザの選択の高さは増加していません。ここで質問があります。高さを設定すると、小さな数値の padding では全体の高さは増加しませんか?
以下は完全に互換性のあるコード例です。

コードをコピー

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

<!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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>デモ</title>
<スタイル>
*{パディング:0; マージン:0}
本文{フォントサイズ:12px}
選択{高さ:22px; 行の高さ:18px; パディング:2px 0}
</スタイル>
</head>
<本文>
<div スタイル="margin-top:20px; margin-left:20px; 背景:#000">
<選択>
<option>デモンストレーション質問 1</option>
<option>デモンストレーション質問 2</option>
<option>デモンストレーション質問3</option>
<option>デモンストレーション質問 4</option>
<option>デモンストレーション質問 5</option>
</選択>
</div>
</本文>
</html>

<<: MySQL タイムブラインドインジェクションの 5 つの遅延方法

>>: React で複数の setStates が何回呼び出されるのでしょうか?