WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が 40% 以上を占めています。ブラウザには多くの種類がありますが、IEだけでもIE5.5、IE6、IE7、IE8など複数のバージョンがあります。これらの多くの上位バージョンの中で、IE6は依然としてほとんどのユーザーに人気があるため、組版時にIE6の互換性を考慮する必要があります。そうしないと、多くの訪問者を失うことになります。

IE6 で注意しなければならない 10 個の問題は次のとおりです。

1. DOCTYPEを使用する
HTML ページの先頭に DOCTYPE タイプを追加する必要があります。もちろん、厳密なバージョンが推奨されます。例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
「http://www.w3.org/TR/html4/strict.dtd」


または、XHTML ページの場合は、!DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

最も望ましくないことは、IE6 が奇妙な動作モードに入ることです。しかし、IE6 にはすでに十分な奇妙な動作があります。

2. 位置の設定: 相対
position:relative を設定すると、特に配置を設定する必要がある場合に、複数の問題が解決されます。明らかに、理解しておく必要があるのは、絶対的な位置付けは相対的であるということです。おそらく、設定していないので、すべてがどこに行ったのかわからないのでしょう。たとえば、各記事の前に写真をデザインしたのに、最終的にページ上に写真が 1 つしかなく、写真が重なり合っていることが判明したとします。

3. フローティング要素に display:inline 値を設定する<br />これは、有名な IE6 の二重マージンのバグによるものです。たとえば、フローティング DIV を設計し、margin-left:5px; を設定した場合、IE6 では margin-left:10px になる可能性があります。ここで、フローティング要素に display:inline; を設定すると、問題を解決できます。

4. 要素にhasLayoutを設定する
IE6 (または IE7) の問題の多くは、hasLayout 値を設定することで解決できます。 (hasLayout が何であるかわからない場合は、ここを参照してください)

要素の hasLayout 値を設定する最も簡単な方法は、CSS の高さまたは幅を追加することです (もちろん、ズームも使用できますが、これは CSS の一部ではありません)。特定の値を設定することが推奨されますが、必ずしも高さがわからない場合もあります。ここでは、height:1% を使用します。親要素に高さが設定されていない場合、要素の物理的な高さは変更されませんが、hasLayout プロパティが既に存在します。

5. 文字の重複の問題を解決する<br />レイアウトが複雑な場合、一部のフローティング要素のテキストが、クリアされたフローティング位置の下に表示されることがあります。これは奇妙な問題ですが、解決方法は次のとおりです。

• フロート要素に display:inline が設定されていることを確認します。
•フローティング要素では margin-right:-3px を使用します。
• フロートの最後の要素の後に IE コメントを追加します。例: <!--[if !IE]>ここにコメントを入力してください... <![endif]-->
• 最後の要素に DIV を追加します (幅を 90% などに設定できます)
更新: 最も簡単な方法は、すべてのコメントを削除することです。 (ヒントを提供してくれたTian Weierに感謝します。私自身はこの問題に遭遇していませんが、Googleで検索したところ、この方法でも問題を解決できることがわかり、お勧めする価値のある方法です。)

詳細については、positioniseeverything.net をご覧ください。

6. ホバーは <a> タグ内でのみ使用します。IE6 はホバー スタイルを表示するために <a> タグのみをサポートしています。もちろん、JS を使用してこの問題を解決することもできます。しかし、これによってアクセシビリティの問題が生じます。 JS を使用して実装されたホバーには重要なコンテンツを設定しないことをお勧めします。

7. !important または advanced セレクターを使用して IE ブラウザを区別します。たとえば、min-height を使用すると、CSS を使用せずに IE との互換性を実現できます。

#要素 {
最小高さ: 20em;
高さ: 自動 !重要;
height: 20em; /* IE6 でこの高さを表示させます */
}

IE6 は min-height を正しく認識できないため、IE6 が 20em として解釈できるように固定の高さを設定できます。それでも、コンテンツのサイズが大きくなるにつれて高さは変化します。別のアプローチとしては、高度なセレクターを使用することです。

#要素 {
最小高さ: 20em;
高さ: 20em;
}
/* IE6 を無視 */
#要素[id] {
高さ: 自動;
}

8. 比例サイズを避ける<br />親要素に正確な高さを追加しない限り、比例サイズは IE6 を混乱させます。それ以外の場合は、他の項目に !important を追加します。例:

体{
マージン: 2% 0 !重要;
margin: 20px 0; /* IE6 で読み取り可能 */
}

9. 早めにテストし、頻繁にテストする<br />レベルが完了していない限り、早めにテストし、頻繁にテストすることを忘れないでください。そうしないと、IE6 の問題のトラブルシューティングにさらに時間がかかる可能性があります。一般的に言えば、Web サイトが IE6 と Firefox で適切に動作する場合、他のブラウザーでも大きな問題は発生しないと考えられます。

10. コードをリファクタリングする<br />多くの場合、問題の解決にはコードのリファクタリングよりも時間がかかります。

<<:  CSS で左上の三角形を作成するいくつかの方法の詳細な説明

>>:  Dockerイメージが消える問題を解決する

推薦する

MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

MySQLインストール後のデフォルトデータベースの役割の詳細な説明

MySQL を学習すると、インストール後にいくつかのデフォルトのデータベースが付属していることに気付...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

Docker コンテナ ソース コードのデプロイ httpd ストレージ ボリュームを使用して Web サイトをデプロイする (推奨)

目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...

MySQL 8.0 の新しいリレーショナル データベース機能の詳細な説明

序文MySQL 8.0 の最新バージョンは 8.0.4 rc であり、正式版は近日中にリリースされる...

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...

リソースアップロード機能を実現するための SpringBoot+nginx の詳細な例

最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...