IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅がウィンドウのサイズに合わせて変化します。ブラウザ ウィンドウの幅が一定量まで縮小されると、下にスクロール バーが表示され、ウェブサイトの幅はそれ以上縮小されなくなります。この単純な機能は CSS min-width を使用して簡単に実現できることはわかっていますが、残念ながら、多くのユーザーの IE6 はこの非常に便利な属性をサポートしていません。どうすればよいでしょうか。ウェブ ページを設計するときに次の CSS ステートメントを追加することで、この問題を解決できます。

方法1:

CSSコードコンテンツをクリップボードにコピー
  1. 高さ:自動!重要;
  2. 高さ: 580px ;
  3. 最小高さ: 580px ;

最小幅を必要とする div に上記の 3 行のコードを追加するだけです。原則は、IE6 自体の BUG を使用することです (ブロックレベル要素内のコンテンツがこのブロックレベル要素の高さを超えると、ブロックレベル要素の高さが引き伸ばされます。つまり、IE6 自体の height 属性は min-height に相当します)。

方法2:

CSSコードコンテンツをクリップボードにコピー
  1. 最小高さ: 200px ;
  2. _高さ: 200px ;

方法3:

CSSコードコンテンツをクリップボードにコピー
  1. #最小幅{
  2.     最小幅: 900px ;
  3. _width:式((document.documentElement.clientWidth||document.body.clientWidth)<900? "900px" : "" );
  4.     行の高さ: 200px ;
  5.     背景: #ccc ;
  6. }

方法4:

CSSコードコンテンツをクリップボードにコピー
  1. #mページ{
  2.     幅:100%;
  3.     最小幅: 980px ;
  4.     位置:相対的;
  5. _width: 式(((document.compatMode && document.compatMode== 'CSS1Compat' )? document.documentElement.clientWidth : document.body.clientWidth) < 980? '980px' : 'auto' );
  6. }

上記の 4 つの方法のいずれも、IE6 が min-width 属性をサポートしていない問題を解決できます。このサイトでは 4 番目の方法を使用します。

IE6 に対応した min-width と min-height の上記簡単な方法は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  SQLデータベースの14の事例の紹介

>>:  CSS3 クリックボタン円形進行ティック効果実装コード

推薦する

...

nginx を使用して正規表現で指定された URL リクエストを傍受する方法

nginx サーバーnginx は、静的ファイルの処理に非常に効率的な優れた Web サーバーです。...

要素の読み込み効果を実現するための純粋なHTML+CSS

これは Element UI の読み込みコンポーネントのエフェクトです。かっこいいですね。実装してみ...

Linux の crontab タスク スケジューリングの簡単な分析

1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...

訪問者を惹きつけるウェブサイトコンテンツを作成する14の方法

ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...

Linux dateコマンドの知識ポイントのまとめ

使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

ネイティブ JavaScript を使用した Web 計算機の実装

この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコー...

ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)

この記事では、例を使用して、MySQL がストアド プロシージャで引き起こすエラー状態 (SIGNA...

WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します

Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...

Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案

スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...

Mysql sql スロークエリ監視スクリプトコード例

1. my.cnfを変更する #全体的な効果としては、グローバルがオンになっている場合はテーブルとロ...

MySQL 8.0.19 インストール詳細チュートリアル (Windows 64 ビット)

目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...

Nginxサービス500：内部サーバーエラーの原因の1つ

500 (内部サーバー エラー) サーバーでエラーが発生したため、要求を完了できませんでした。 50...