html - Firefox 対 IE 対 Chrome 対 Safari

Question

現在、私はウェブサイトをデザインしていますが、すべてのブラウザで完璧にウェブサイトを表示するのは非常に難しいと感じています.

従うべき規則、提案などはありますか?

ありがとう

score 26 · Accepted Answer

標準に合わせて開発し、例外を追加します

現在、最も人気のあるほとんど準拠しているブラウザはFirefoxであるため、Firefoxへの開発は自然な最初のステップです。W3Cのバリデーターを使用して、順調に進んでいることを確認します。ページがほぼ完成したら、SafariとChrome（どちらも非常に準拠しているブラウザーなので、それほど問題はないはずです）でも見栄えがよいことを確認してから、IE（6と7の両方）用に修正を開始します。そして私を信じてください、それは修正する必要があります！QuirksModeのようなサイトは、例外を追加するときに大きな助けになる可能性があります。

常にHTML4.01の厳密なDOCTYPEを使用してください

XHTMLには多くの支持者がいるため、これはおそらくここでより議論の余地のあるポイントの1つになるでしょう。残念ながら、IE互換と標準準拠の両方の方法でXHTMLファイルを提供することは不可能です。IEはXHTML MIMEタイプを認識せず、それらをとして提供するための標準に違反しますtext/html。HTML 4.01 Strict DOCTYPEのみが、すべてのブラウザーを（ほぼ）標準モードにしますが、標準に準拠しています。詳細については、DOCTYPEスイッチングを検索してください。整形式のXMLであるページを作成せずに絶対に解決できない場合は、XSL変換を使用して、選択したXMLフレーバーからHTMLにページを変換します。

CSSの「ハック」を使用しないでください

それらは時々非常に魅力的かもしれませんが、ハックはブラウザのバグの副作用に基づいています。このため、将来のブラウザがそれらにどのように反応するかを予測することは不可能ではありません。一方、条件付きコメントはIEブラウザーの意図的な機能であるため、安全に使用できます。実際、これらはIE固有の（そして多くの場合検証されていない）CSSを有効なスタイルシートから除外するための優れた方法です。

ピクセル揃えのレイアウトを作成しないでください

すべてのブラウザをピクセルまで整列させようとすることは、フラストレーション（そして、多くの場合、無益）の練習です。たとえば、ページの反対側にある左右の境界線よりも2つの左側の境界線の間のずれを修正する方が簡単なので、壊したときにまだ問題ないように見えるレイアウトを作成してみてください。境界線が組み込まれている背景画像を使用することは、大きな警告フラグになるはずです。

フォントに絶対サイズを使用しないでください

誰もがあなたと同じサイズのモニターを使用しているわけではありません。脚注をに設定する代わりに、またはfont-size: 10px;に設定します。これはアクセス可能性の大きな問題です。font-size: smaller;font-size: 80%;

CSSプロパティのデフォルト値に依存しないでください

すべてのブラウザが同じデフォルトを使用しているかどうかはわかりません。 YUIの「リセット」スタイルシートは、始めるのに最適な場所です。

score 23 · Accepted Answer

Web サイトをすべてのブラウザーとプラットフォームでまったく同じように表示することは、事実上不可能です。一番の理由は、Windows、Mac、Linux、Solaris などでフォントのレンダリングが異なることです。

私たちが従う新しい考えがあります: Web サイトは、異なるブラウザーやプラットフォームでまったく同じように見える必要はありません。非常に簡単に 96 ～ 98% まで進むことができます。残りは、潜在的な利益のために途方もない量の努力を必要とします.

Firefoxの開発を開始します。それが正しければ、残りのブラウザーは非常に近いものになります。IE は、ほとんどの場合、正しく理解するのが本当に難しいものです。クライアントまたは自分自身に、IE 6 はもはや必須ではないことを伝えることをお勧めします。

すべてのブラウザー出力を共通の基盤に置く「リセット」CSS スタイルシートを使用して、正しい足元から始めるようにしてください。チェックアウト: http://developer.yahoo.com/yui/reset/

最後に、ExtJS、JQuery、Prototype などの Javascript ライブラリを標準化することで、ブラウザーの違いを隠し、プロジェクトのコードに集中できるようにすることで、手間を省くことができます。

score 12 · Accepted Answer

XHTML と CSS が有効であることを確認してください。
標準の Javascript のみを使用してください。
1 つの主要な (IE 以外の) ブラウザーでテストします。Firefox または Chrome をお勧めします。
あなたのサイトは、主要な (IE 以外の) ブラウザーで非常によく似ているはずです。
dillo や lynx (または両方) などでテストします。
最後に、ハックを開始して IE を機能させます

score 10 · Accepted Answer

Browsershotsをチェックしてください。さまざまなブラウザでサイトのスクリーンショットを作成するので、視覚的に確認できます。ちょっと遅いですが、うまくいきました。

score 5 · Accepted Answer

これは、ブラウザでウェブサイトを完成させることについて、私が少し前に行った回答です（ここから）

実際、Web アプリケーションを開発するときに使用する必要があるのは次のとおりです。

ファイアフォックス
IE
サファリ
（クロムはすぐに...）

つまり、3 つの主要なグレード A ブラウザーすべてで Web サイトのすべてのステップをテストする必要があるということです。そのため、プロセスで何かが機能しない場合は、中断の原因を正確に知ることができます。

ページがどのように表示されるかをブラウザで定期的に確認しないと、後で問題を修正するのが非常に難しくなります。

score 4 · Accepted Answer

多くの開発者は、FireFox でテストを開始して IE7 に移行することを好みます。このようにして、両方の最も人気のあるブラウザを使用できます。

Firefox にはこの FireBug があり、何が問題なのかを確認して修正できるため、私は FireFox に行くよりも IE7 から始めるのが好きです。しかし、FireFox の拳でテストするようにゆっくりと変更していると言わざるを得ません。(ちなみに、FireBug は IE 用の Javascript で利用できるので、すばらしいです)。

もちろん、誰があなたの公開者であるかを確認する必要があります。それが社内で使用され、IE のみを使用している場合、選択は簡単です。開発者向けの場合は、FireFox を使用するユーザーが増えるでしょう...対象ユーザーによっては、最初にテストすることをお勧めします。

ただし、すべてのブラウザで完璧に見えるようにしようとしないでください。無駄に時間を無駄にすることになります。すべてが正常に表示され、すべての JavaScript アクションが正しく実行されていることを確認してください。

score 4 · Accepted Answer

ターゲットオーディエンスを特定してから、彼らが使用しているブラウザーを特定することをお勧めします。これが完了したら、そのブラウザで完璧を目指してください。ここで、いくつかの回避策を実行して、他のブラウザーで見栄えを良くすることができます。

今日、すべてのブラウザで完璧を目指すことは、世界平和を求めることに似ています。

jQuery などの Javascript フレームワークを使用して負担を軽減することもできます。

score 3 · Accepted Answer

すべてのブラウザを他のブラウザと同じようにピクセルパーフェクトに表示させようとしないでください...あなただけが知っているでしょう! すべてのブラウザで見栄えを良くするようにしてください。

score 3 · Accepted Answer

完璧を手に入れることはできません。
通常、ブラウザ固有のハックではなく、すべてのブラウザで動作する CSS のサブセットを使用するのが最善の策です。
JavaScriptは必ずJavaScriptフレームワーク( JQuery / Prototype / YUI / Ext /etc)を使用し、dom参照・操作専用に使用してください。それを正しく行うのは難しく、彼らはすでにあなたのために多くの作業を行っています
良い参考サイト

score 3 · Accepted Answer

テーブルの代わりにより多くの CSS を使用すると、すべてのブラウザーで同じものを取得しやすくなることがわかりました。まだ少しトリッキーですが、テーブルレイアウトのロジックはもっと悪いです。テーブルは控えめに使用してください。

ああ、物事を「伸縮性」にすることは常に問題です。幅/高さを固定する方が簡単です。

score 3 · Accepted Answer

厳密な doctype を使用します。

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

ASP.NET を使用している場合は、web.config を追加/変更する必要があります。

<system.web>
    <xhtmlConformance mode="Strict"/>

また、css 準拠のアダプターも確認してください。http://www.asp.net/cssadapters/

Web サイトをすべてのブラウザーで同じように表示するために何時間も費やしましたが、これは機能しているようです。最後の提案。頻繁に確認する: すべてのブラウザで同じように表示されることを確認する前に、あまり多くのことを行わないでください。

score 2 · Accepted Answer

私のアプローチは、Firefox、Opera、およびその他のMicrosoft以外のブラウザー用にコーディングすることです。それらで動作したら、IEの機能を別のstylesheet/jsファイルにパッチします。

また、私は通常、JSライブラリとCSSフレームワークを使用します。10回のうち9回、JqueryとYUIグリッドを使用しています。

score 2 · Accepted Answer

Firefox 用に開発します。次に、IE 固有の修正を適用します。Chrome と Safari で問題なくレンダリングされることを願っています。

その理由は、IE を「正しく」動作させるための修正はあるものの、Firefox の動作を悪くする修正はあまりないためです。

ああ、そしてTranscending CSSのコピーを購入してください。

score 1 · Accepted Answer

ExtJS などの JS ライブラリを使用します。これにより、ブラウザ固有のスタイリングの側面が抽象化されます。

読みやすくきれいである限り、ブラウザによって見た目が異なるのは間違っていますか?

score 1 · Accepted Answer

Firefox 用の CSSViewer 拡張機能を使用してください。非常にユーザーフレンドリーなコードに対して実行できるいくつかの修正を確認するのに役立ちます。CSS の display:block または display:inline-block プロパティを使用すると、非常に便利です。マージン、パディング、高さ、幅はあなたの友達です。多くのブラウザーで同じものを表示するには、これらの値を指定する必要がある場合があります。フォントについては、yahoo yui fonts css を読むことをお勧めします。

score 1 · Accepted Answer

従うべき最善の方法は、ライブラリと事前に作成されたコードを使用することです。例: JavaScript を使用しないでください。代わりに、JQuery を使用してください。JQuery は、そこにあるすべてのブラウザーと互換性があり、独自のテーマを作成する代わりに、無料の CSS テーマを使用します。

それは私にとってはうまくいき、時間を大幅に節約するのに役立ちます。プロの市場では、時間はお金を意味するからです。

ありがとう。

score 0 · Accepted Answer

IE7 も要件ではなくなりました。それは今や厄介なセキュリティの責任です。IE8 は、他のブラウザーが行うことのほとんどをサポートする必要があります。使い勝手は悪くなりますが、そもそもIEを使っていると、とにかく味がありません。

score 0 · Accepted Answer

最初にFFなどでWebサイトをチェックしてから、サイトを「修復」してIEで問題なく見えるようにします。ほとんどの場合、コードが検証済みでクリーンでシンプルな場合、IE はわずかな編集しか必要ありません。IE にはさまざまなスタイルシートを使用しています。ハックの使用はお勧めしません。JavaScript には 1 つのライブラリのみを使用します。はい、ブラウザショットは大いに役立ちます。

score 0 · Accepted Answer

厳密な doctype を使用し、有効な xhtml/html と有効な CSS を出発点として使用することをお勧めします。また、必ず reset/undo.css を使用してください。

これらすべてにもかかわらず、キャッチはありますが、ごくわずかです