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

各ブラウザーの 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">

デモの質問 1

デモの質問 2
デモの質問 3< ;/オプション>

オプション>

関連ラベル：

select在各个浏览器中的兼容性问题

ソース：php.cn

前の記事：例を使用して CSS 疑似クラスを学習する elements_html/css_WEB-ITnose 次の記事：CSS 初期化の問題_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• BlackRock Labels BTC a Unique Diversifier
  2024-09-20 15:51:33
• Internet Computer (ICP) Price Prediction: Will ICP Price Hit $24?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• 今日投資すべきトップミームコイン
  2024-09-20 15:39:32
• Floki (FLOKI) 価格予測: 刷新されたマーケティングは Floki が 10 月の利益を取り戻すのに役立ちますか?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• Apple 版の Little Fox Payment Platform をダウンロードする方法
  2024-09-20 14:53:01
• 初心者がMetaMaskで取引する方法とその利点と欠点
  2024-09-20 14:51:01

最新の問題

すべてを試しましたが、HTML コンテンツが表示されません 基本的に、HTML ドキュメントの内容はブラウザーには何も表示されません。私が作成したこの HTML ドキュメントは、別の HTML ファイルからリンクされています。この HTML...

から 2024-04-04 19:16:15

0

1

3496

まったく同じことを行うチュートリアルを見ているにもかかわらず、mySQL データベースから情報を受信できません そこで、MySQL データベースの読み取りと書き込みを行うプログラムを作成しようとしており、それが YouTube チュートリアルにつながりました。私の問題は、チュートリアルの男と...

から 2024-04-03 14:46:04

0

1

298

Chrome での HTML Web ページのページネーション フルページの div コンテナの後にページネーションしようとしています。紹介ページを読み込むのと同じように、下にスクロールすると、一種のナビゲーション センターに入ることができます...

から 2024-04-02 23:26:08

0

1

404

HTML で <br> タグを使用するときに出力の書式設定で問題が発生します 練習問題で困っています。ご覧のとおり、HTML から CSS まですべてが揃っていますが、出力は正しい方法で表示されるようになりました。 <br>タグを使用すると、次の...

から 2024-04-02 15:56:11

0

1

315

React および Next.js でクライアント側レンダリングを使用することによって発生する React Hydration エラーを修正するにはどうすればよいですか? React の useEffect フックと組み合わせます。私の目標は、反応ハイドレーション エラーの発生を確実に防止しながら、クライアント側のレンダリングを組み込むことです。私の...

から 2024-03-31 09:04:35

0

1

377

関連トピック

詳細>

• ファイルとは何ですか
• nohupコマンドの詳しい説明
• 配列の長さを取得するjsメソッド
• ポッドキャスティングとはどのようなソフトウェアですか?
• Java文字列を数値に変換
• 仮想通貨取引プラットフォームとは何ですか?
• PowerDesigner から Word をエクスポートする方法
• Docker コンテナが外部ネットワークにアクセスできない場合はどうすればよいですか?

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1408378
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4241045
• 
  JAVA 初心者向けビデオチュートリアル

  2438812
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  500389
• 
  PHP ゼロベースの入門チュートリアル

  838804

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1408378 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2438812 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  500389 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  214612 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  865936 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  5289 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  4067 回の学習
• 
  Go言語実践GraphQL

  3483 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  575 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  17847 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！