一般的に、IE6のレイアウトのバグに取り組むための最良の方法は何ですか?あなたのページが突然猿がそれをコード化したように見える理由を理解しようとするときに探すべき最も一般的なバグや問題は何ですか?
12 に答える
ファースト シングス ファースト
Internet Explorer Developer Toolbarを入手してください。これは命の恩人であり、IE6 や IE7 でうまく機能します。Web Developer Toolbar や Firefox の Firebug に取って代わるものではありませんが、何もないよりはましです。
汝の敵を知れ
IE の癖、特にhasLayoutやoverflowなどについて読んでください。また、CSS の優れた点も数多くありますが、それらを使用せずに済ませるか、代替案を見つける必要があります。人気のある JavaScriptツールキット/フレームワーク/ライブラリのうち、さまざまな問題を回避しているものがどれだけあるかを調べてください。
ローマは一日にして成らず
より多くの作業をしなければならないほど、より多くのことをすぐに覚えることができ、頻繁に検索する必要がなくなります。これには経験に代わるものはありません。ただし、何人かが指摘しているように、ネット上には優れたリソースがあります。 ポジションはすべてが確かにそこにあります。
http://www.positioniseeverything.net/は確かにあなたの問題に対処します。
ブラウザーのバグの包括的かつ詳細な説明と、それらを回避するためのオプションを提供します。私の意見では、必読です。
IE がたまたまどのようにページをマングリングしているかを知る良い方法の 1 つは、CSS を使用してさまざまな要素の赤い境界線を有効にすることです ( border: 1px solid red;
)。これにより、マージンの問題なのかパディングの問題なのか、要素の実際の幅などをすぐに知ることができます。
Marc の投稿が -2 =D にあることに気付きました。IE6 のような厄介なブラウザーでは、壊れた CSS コマンドの一部がテーブルでしか機能しないため、彼は「テーブルに頼る」と言っているだけです (理由は誰にもわかりません... ビル・ゲイツをくそったれ!!!)。これは、CSS に関する限り、何が機能し、何が機能しないかを確認するための良いリファレンスです。 http://www.quirksmode.org/css/contents.html . 広く使用されているさまざまなブラウザで、どのクールな効果が機能するか、または機能しないかを確認するための優れたリファレンスです。また、多くの企業(非営利団体/第三世界の国などを含む)がまだ古いブラウザーを使用しているため、IE6 でブラウジングするユーザー向けに常に頼りになるプランを用意してください(機械的な汚れと同じくらい古いものですが)。 、標準の水平メニューよりもはるかに見栄えが良いバグアウトドロップダウンメニューを作成しますが、ページがIE6ブラウザからリクエストを受け取ったときにデフォルトになるIE6専用のセカンダリメニューを作成します.
通常、ボックス モデルが原因です。基本的にこれが意味することは、サポートされていない CSS を配置して使用しようとしている div がこの問題を引き起こすということです。
min-{width,height} または max-{width,height} を使用している場合に発生することがあります。
これは、異なるバージョンとの互換性をチェックするための優れたリファレンスを提供します。
よくある問題は、ブロック要素の幅にパディングが追加されないことです。そのため、レイアウト div の場合は、パディングの使用を避け、代わりにその中の要素を使用してパディングを定義します。
IE/標準ブラウザ間の違いを微調整する必要があるときは、Rafel Lima の Browser Selectorを使用します。一般的な問題を解決するために HTML で「ハック」を使用することが大幅に減少します。
さまざまなブラウザー、さらにはさまざまなバージョンのブラウザー (Hello IE 6) の CSS ステートメントをターゲットにすることができます。実装は非常に簡単ですが、ユーザーが JavaScript を有効にする必要があります (ほとんどの場合有効です)。
。もの { ....}
.ie .thing { ....}
.ie6 .thing { ....}
レイアウトのバグをどのように定義しますか? IE で最も苛立たしいレイアウトの実装 (これをバグとして定義する必要があるかどうかはわかりません) は、空白行が表示されないように、HTML の <form> タグで常にstyle="display:inline"を指定する必要があることです。フォームのレイアウトを乱す。
この質問には、範囲が広すぎると私は信じています。
コードを検証し、問題が解決しない場合は、幸運を祈ります。
他の球場のバグタイプと同様に、唯一の本当の解決策は、グーグルで解決策を探すか、知っている人に尋ねることです(つまり、ここで正確な問題を私たちに教えてください stackoverflow )。
IE Dev ツールバーを使用してアイデアを収集できますが、多くのバグはランダムで、説明がつかず、難解です。IE: ギロチンのバグ、ランダムなアイテムの複製のバグなど、リストは続きます。どこでも愚かな変数で文字通り何時間も無駄に過ごし、何も達成できません。
毎回うまくいく簡単な戦略があります。
まず、一般的に受け入れられている CSS を使用して、Safari と Firefox 3 で適切に表示されるようにサイトを開発します。ブラウザー サポートの詳細については、w3schools.comを参照してください。
次に、IE6 と IE7 に移動し、条件付きinclude を使用して CSS を変更します。
これはハックフリーで、さまざまなブラウザーを処理できます (IE6 と IE7 には別の問題があります)。
見つかる問題のほとんどは、IE でサポートされていない機能 (最小幅など)、ボックス モデルのエラー (IE は一部のボックスに目に見えない余分なパディング (3px) を追加する)、または配置の問題に起因します。それらはしばしば問題になるので、最初にそれらに行きます。
特定のバージョンの IE6 でのみ明らかになるフローティング div の問題がありました。最新のサービスパックをダウンロードすることで修正されました。
理論的には、IE6 のレイアウト バグと互換性のある CSS を使用し、よく知られた回避策 (css および html フィルター) のみを使用し、上位互換性を壊さない方法でコードを記述し、quirks/strict モードをテストします。
実際には、テーブルに頼ってください。