3

すべての Web 開発者と同じように、私は通常、少なくとも週に 1 回は IE6 の作成者を不愉快で早すぎる死で呪います。それでも私の会社は、最も嫌われているブラウザをサポートし続けることを私に要求しています。

今日の問題は、最初に CSS でワイルドカードを使用してから、代わりに「継承」プロパティを使用しようとすることです。どちらも IE7 以降ではサポートされていません。

私は本当に、よく構造化された、適切に継承された優れた CSS (流行語が好きなら、オブジェクト指向 CSS) を本当に本当に望んでいますが、遅かれ早かれ、それは私の胃の穴に沈むような感覚を持っています。カスタム目的およびロケーションベースのクラスになります。

これは疑問を投げかけます: IE が多くの CSS 概念を処理するのがいかにひどいものであるかを考えると、適切に構造化された CSS ドキュメントを持つと同時に、このブラウザーを適切にサポートすることは不可能でしょうか?

明確にするために: IE6 と 7 で見つかったバグや欠点を回避する方法はたくさんあります (正当な方法もあれば、そうでない方法もあります)。 、適切に継承された適切に作成されたスタイルシート、それとすべてのブラウザーで一貫した外観のどちらかを選択する必要がありますか?". それが理にかなっていることを願っています。

言い換えれば、私は自分の原則に固執して適切なスタイル シートをコーディングするべきでしょうか、それとも IE6 がまだ恐ろしく高い市場シェア (最終集計で 20%) を享受していることを受け入れて、それをサポートするようになるべきでしょうか? それとも、HTML と CSS でフランケンシュタイン手術を最小限に抑えながら、IE でそれなりの結果を達成できる幸せな媒体はありますか?

4

7 に答える 7

3

まったくありません。条件付きコメントと IE 固有のスタイルシートを使用して IE の欠点を補うと同時に、「適切な」スタイルシートを他のブラウザーに提供できます。

他に役立つと思うのは、CSS resetを使用することです。これで IE の問題がすべて解決されるわけではありませんが、作業のベースラインとしては十分です。

于 2009-04-19T23:50:16.077 に答える
1

確かにそうではありません。「quirks」モードではなく「標準」モードでページをレンダリングすることを確認すると、一般的な IE CSS の問題の多くが解決されます。これを行うには、ページの上部に有効な doctype ステートメントを指定する必要があります。

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

他の人が指摘しているように、次のようにすべてのパディングとマージンを削除するスニペットでスタイルシートを開始することをお勧めします。

*,html {
margin: 0;
padding: 0;
}

最後に、IE の CSS ベースのレイアウトでよくある問題の 1 つは、float のクリアが期待どおりに行われないことです。これは、「hasLayout」と呼ばれる IE の隠しオブジェクト プロパティと関係があります。「レイアウトを持っている」オブジェクトのみが正しくラップアラウンドし、フロートされた子オブジェクトを囲みます。コンテナに少なくとも 1 つのディメンションを指定するだけで、コンテナに「レイアウトがある」ことを簡単に確認できます。

height: 1%;
width: 100%;
zoom: 1;

私は条件付きIEスタイルシートを個人的には使用していません.1つのことを除いて.オブジェクトを 2 つの異なる場所に配置します。上記の 3 つのヒントと少しの忍耐があれば、単一のスタイルシートを使用して、Mozilla/Webkit と同じように IE 6/7 でもレンダリングされる CSS ベースのレイアウトを作成できるはずです。

ハッピーコーディング！

于 2009-04-20T10:10:20.390 に答える
1

IE6 の最も厄介な機能は、ボックス モデルの処理です。ボックスを配置するときはマージンに固執し、相対フォント サイズを使用して、IE でフォントのサイズを変更できるようにする必要があります。残りの癖は十分に文書化されています。

条件付きコメントを使用することは、適切に動作するブラウザー用のクリーンなスタイル シートと、IE での美しい使用の両方を実現する最もクリーンな方法です。これは私が使用しているもので、数行の 1 つの css ファイルだけで、サイトのルック アンド フィールを修復できます。

クロスブラウザの一貫したルック アンド フィールのダークパスはcss ハックですが、私はそれを使用しないことを強くお勧めします。

通常、スタイルが FF と Chrome/Safari の両方で機能するようになれば、IE はほんの数修正で正しいものになります。

于 2009-04-20T00:03:08.213 に答える
1

FF、IE、および Safari が標準 CSS にどのように準拠しているかを詳しく説明している優れたサイトPosition Is Everythingがあります。このサイトでは、CSS 用に非常に多くの条件付きコードを記述する必要性を軽減する IE の回避策/治療法のほとんどを見つけることができます。

CSS と IE の詳細については、A List Apartも参照してください。CSS を使用したテーブルレス レイアウト、IE の高さのバグの処理などに関するすばらしい記事もあります。幸運を祈ります。IE 6 は、CSS に関しては本当に最悪です。

于 2009-04-20T00:25:18.127 に答える
-1

IE6 および Chrome (または Webkit) で正しくレンダリングされるオンライン CSS チュートリアルのみに従ってください。両方で正しく表示される場合は、(ほぼ) すべてのブラウザーで正しく表示される可能性があります。

于 2009-04-20T00:02:48.353 に答える