IE6 のバグと修正 - 問題が発生する前に防ぐ戦略_HTML/Xhtml_Web ページの制作

IE6 のバグとその修正方法について議論する前に、これらの厄介な問題を回避するためのいくつかの戦略について話し合う必要があります。よく言われるように、問題の芽を摘み取ります。

原文: Ultimate IE6 Cheatsheet: How To Fix 25 Internet Explorer 6 Bugs
翻訳: http://www.php.cn/(翻訳

IE6 の バグ とその修正方法について説明する前に、これらの煩わしい問題を回避するためのいくつかの戦略について話す必要があります。問題 - いわゆる予防として 起こる前に苦しみます。

IE6 の市場シェア

市場シェア統計によると、現在 (2009 年 8 月) の IE6 の市場シェアは 25.25% ですが、統計では他の場所では明らかに低く、18.1% は統計結果は異なりますが、いずれも減少傾向を示しています (この記事が翻訳された時点では、 タオバオの IE6 ユーザーは 70% から 70% 未満に減少していました)。 % から 69%)。しかし、最も重要なことはあなた自身のウェブサイトの統計です。 Web サイトのトラフィック分析を行う場合、IE6 のシェアは IE6 用に開発する価値がありますか?これは自分で量る必要があります。

Web サイトの訪問者の大多数が IE6 を使用しておらず、料金も支払わない場合は、Web サイトを特に IE6 と互換性を持たせる必要はなく、時間、エネルギー、コストを節約できます。

簡潔なデザインを作成します

レイアウトの問題を回避するために、デザイン中にコードの実装を検討します。どんなに複雑な設計案であっても、簡潔なコードで実装できます。複雑すぎるタグを使用する場合は、設計案を修正する必要があります。
豊富な開発経験があり、多くのレイアウトの問題を解決してきた場合は、将来同じ問題が発生したときに開発効率を向上させるために解決策を記録しておいてください。

適切なドキュメント宣言 (doctype) を使用します

間違ったドキュメント宣言を使用すると、互換モード (奇妙なモード) がトリガーされます。これにより、ページの一貫性が維持されます。すべてのブラウザでのパフォーマンス。ドキュメント宣言のいずれかを使用します: HTML 5[/i]、[i]HTML 4.01 Strict[/i]、[i]HTML 4.01 Frameset[/i]、[i]HTML 4.01 Transitional[/i]、[i] XHTML 1.0 Strict[/i]、[i]XHTML 1.0 フレームセット[/i]、[i]XHTML 1.0 Transitional[/i]、または [i]XHTML 1.1

HTML 5 HTML 4.01 Strict //W3C//DTD HTML 4.01//EN" "

http://www.php.cn/

">

HTML 4.01 フレームセット

http://www.php.cn/ ">

HTML 4.01 暫定版

http://www.php.cn/">

XHTML 1.0 Strict

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn/">

XHTML 1.0 フレームセット

http://www.php.cn /">

XHTML 1.0 移行版

http://www.php.cn/">

XHTML 1.1

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.php.cn/">

コードを検証する

コードの検証には実用的な価値がないと考えている人もいると聞きましたが、私はそうは思いません。検証はほんの一瞬で完了し、IE6 だけでなくすべてのブラウザにメリットをもたらします。また、検証によって下位互換性が確保され、保守も容易になります。少なくとも XHTML を検証する必要があります。検証を無視できるのは、CSS3 を使用する予定がある場合のみです。 w3 が提供するツールを使用できますXHTML の検証

/

CSS の検証

まず標準ブラウザとの互換性を確保してください

コードを記述するプロセスでは、最初に標準ブラウザ (Firefox、Opera、Chrome など) でテストし、次に非標準ブラウザ (IE6/IE7 など) をテストします。これらの標準ブラウザはすべて w3c 標準に従っているためです。 、ほとんどの治療法は同じです。 「特別な」IE ブラウザと互換性を持たせるためにそれらを分離することができます。これによりコードが標準化され、強固な基盤が得られます。また、これらの非標準ブラウザとの互換性が必要なくなった場合は、それらをすべて一度に削除できます。これらは互換性コードを修正します。
プログレッシブエンハンスメント

プログレッシブ拡張 は、ページの特殊効果がなくても基本的な機能が利用できるようにするものです。簡単に言うと、プログレッシブエンハンスメントとは、JavaScript を無効にしてもページが正常に動作することを確認した上で、ページにさまざまな特殊効果 (JavaScript アニメーション、Ajax 非同期など) を追加することを指します。 「プログレッシブ拡張」原則を使用して、CSS3 (または一部の CSS2)、HTML5、および IE6 がサポートしていないその他の Web 仕様を使用することもできます。
場合によっては、特に IE6 を使用しているブラウザーでは、すべてのユーザーをまったく同じにすることが不可能です。段階的な拡張戦略を使用すると、これらのユーザーが Web サイト (または Web アプリケーション) の少なくとも基本的な機能を確実に使用できるようになります。

プログレッシブ エンハンスメントの詳細:

• プログレッシブ エンハンスメントについて (翻訳)

• プログレッシブ拡張について理解する

• CSS を使用したプログレッシブ拡張

• プログレッシブ エンハンスメント: 概要と使用方法

• グレースフル デグラデーションとプログレッシブ エンハンスメント

• 実際的なプログレッシブ拡張 - わざわざ使用する必要がある理由

独自のデフォルト スタイルを使用する (CSS リセット)

各ブラウザには独自の異なるデフォルト スタイルがあります。スタイル シートを作成する前にデフォルト スタイル (CSS リセット) を使用すると、後でブラウザ互換の長いスタイルを作成する必要がなくなります。インターネット上には参照可能な CSS リセットが多数あります。

簡単な CSS リセットの例:

body,p,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea, p,
th,td {margin:0;padding:0;}

いくつかの CSS リセット 参考:

• YUI CSS リセット

• Eric Meyer のリセットがリロードされました

• KISSY CSS リセット

JavaScript フレームワークを使用する

Web サイトで JavaScript 効果を多く使用する場合は、JavaScript フレームワークを使用することをお勧めします。ほとんどの js フレームワークは、IE6 を含むさまざまなブラウザーと互換性があります。オプションのフレームワークは多数ありますが、一般的に、あるフレームワークで達成できる効果は別のフレームワークでも確実に達成できるため、個人の好みに応じて適切なフレームワークを選択できます。

一般的に使用される JavaScript フレームワークの一部を次に示します。

• MooTools

• jQuery

• ProtoType と Scriptaculous

• Dojo

• Ext JS

MooTools を強くお勧めしますが、初心者の場合は、やはり jQuery を使用することをお勧めします。 。

JavaScript を使用して標準ブラウザをエミュレートする

IE6 を使用しているユーザーの割合が高く、IE6 を使用しているユーザーの割合が高い場合、IE で標準ブラウザをエミュレートするための JavaScript が追加されました。 JavaScript がオンになっている場合は、Dean Edwards の IE7 または同様のスクリプトの使用を検討してください。
翻訳者注: これらの「シミュレーション」の実装は多くの場合多くのリソースを消費し、IE はすでに十分に性能が悪いため、これらのスクリプトの使用はお勧めできません。

IE でのページのデバッグ方法

IE でのページのデバッグは非常に面倒なので、Firefox の拡張機能Firebug Web Developer Toolbar はすべて非常に便利なツールです。IE またはその他のブラウザで Firebug を使用したい場合は、Firebug Lite を使用できます。
IE には、IE Collection と IETester という 2 つの最適なデバッグ方法があり、どちらも無料です (ただし、いくつかの欠陥があります)。 IETester の開発者は DebugBar も提供しています。この IE プラグインは個人使用には無料ですが、商用ユーザーは 60 日間しか試用できません。

上記は、防止戦略_HTML/Xhtml_webpage 作成と呼ばれる IE6 のバグと修復戦略の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。