すべてのブラウザに完全対応したselectを作成するためのベストプリセット
2022-01-16 04:08:55
selectタグはブラウザによってプロパティやサポートが異なるため、セレクトボックスの表示もブラウザごとに異なることが分かっています。
セレクトの高さ、パディング、ラインハイトをそれぞれ制御変数、height.100.padding.0, height.no.padding.100, no.height.no.padding にして、各ブラウザで3ケーステストするDEMOを書きました。結果は以下の通りです。 各ブラウザのリンク画像 DEMOの外観
次のような学習属性を導き出すことができる。
<テーブル
以上の調査結果のまとめにより、IE6はどう設定しても高さ22px固定、safari以外のブラウザはheightプロパティに対応しているので、height:22pxとすることがわかりました。height属性があるので、line-heightで高さを22pxに固定できる、font-sizeが12pxの前提でline-height:22pxを設定、最後にFFとIE9は中の文字が中央に来ない、padding:2px 0を設定、FFとIE9は中央に来ることが分かった、しかし各高さは 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<div style="margin-top:20px; margin-left:20px; background:#000">
<select>
<option> demo question one</option>
<option>Demonstration problem two</option>
<option>Demonstration problem three</option>
<option>Demonstration Question Four</option>
<option>Demonstration Question Five</option>
</select>
</div>
</body>
</html>
セレクトの高さ、パディング、ラインハイトをそれぞれ制御変数、height.100.padding.0, height.no.padding.100, no.height.no.padding にして、各ブラウザで3ケーステストするDEMOを書きました。結果は以下の通りです。 各ブラウザのリンク画像 DEMOの外観
次のような学習属性を導き出すことができる。
<テーブル
ie6
IE7
IE8
IE9
ff
ch
sf
op
デフォルトの高さ
22px
22px
19px
20px
19px
19px
高さ
F
T
T
T
T
T
F
T
パディング
F
F
T
T
T
T
F
T
ラインハイト
F
F
F
F
F
F
T
F
テキストの垂直方向中央揃え
T
T
T
F
F
T
T
T
以上の調査結果のまとめにより、IE6はどう設定しても高さ22px固定、safari以外のブラウザはheightプロパティに対応しているので、height:22pxとすることがわかりました。height属性があるので、line-heightで高さを22pxに固定できる、font-sizeが12pxの前提でline-height:22pxを設定、最後にFFとIE9は中の文字が中央に来ない、padding:2px 0を設定、FFとIE9は中央に来ることが分かった、しかし各高さは 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<div style="margin-top:20px; margin-left:20px; background:#000">
<select>
<option> demo question one</option>
<option>Demonstration problem two</option>
<option>Demonstration problem three</option>
<option>Demonstration Question Four</option>
<option>Demonstration Question Five</option>
</select>
</div>
</body>
</html>
関連
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
divにcontentEditable=trueを設定すると、内容をリセットした後にカーソルを配置できない。
-
htmlのテキストがオーバーフローして省略文字が表示される場合の2つの一般的な解決方法
-
CSS極座標のコード例
-
テーブル表でスラッシュヘッダー効果を実現する5つの方法
-
選択項目にスタイルを追加するための純粋なcss（スクリプトなし）
-
HTMLエンベデッドWMP対応クローム、アイ書き込み方法詳細
-
自社コンパイルのDIV共通属性
-
metaタグにおけるhttp-equiv属性の使用方法についてご紹介します。
-
IE6 スペースバグ修正
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン