div+css レイアウト ブラウザ互換_html/css_WEB-ITnose

最近、フロントエンドの表示インターフェイスを制御するために div+css を使用するプロジェクト システムに取り組みました。さまざまなブラウザーでの表示効果が大きく異なることがわかりました。現在、div+css とブラウザーに関する情報を探しています。 div+cssの知識のまとめ。
Firefox と IE を区別するために最も一般的に使用される方法は、!重要な方法です。異なるブラウザーや異なるバージョンのブラウザーとの互換性の問題については、@import、コメント、属性セレクター、sub などの方法もあります。 -オブジェクトの選択 シンボルや音声ファミリーなどのメソッドについては、「Css Website Layout Record」で説明しています
以下は、IE と Firefox の CSS 互換性の問題です
1.DOCTYPE は CSS 処理に影響します
2.FF: div セットmargin-left、margin-right が auto に設定されている場合、すでに中央に配置されていますが、IE は動作しません
3.FF: body が text-align を設定するとき、div は margin: auto を設定する必要があります (主に margin-left、 margin-right) を中央に配置します
4.FF: パディングを設定します その後、div により高さと幅が増加しますが、IE では増加しないため、追加の高さと幅を設定するには ! important を使用する必要があります
5.FF: ! important はサポートしますが、IE は無視します。 ! important を使用して FF 用の特別なスタイルを設定できます。これは注目に値します。 はい、必ず xxxx ! important 文を別の文の上に配置してください
6. div の垂直方向のセンタリングの問題:vertical- align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px; 次に、テキストを垂直方向に中央揃えで挿入します。欠点は、ラップせずにコンテンツを制御する必要があることです
7. カーソル: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます
8. FF: 境界線と背景色を追加しますリンクには、display: block を設定する必要があります。また、float: left を設定すると、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。
9. mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策: div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序を記述してはいけないことに注意してください。 Ajie 氏によると、引数 ! important は IE では認識されませんが、他のブラウザでは認識されます。実際には IE では次のように解釈されます: div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important; と書くことはできません
10 IE5 と IE6 の BOX 解釈は矛盾しています
IE5 では、div{width:300px;margin:0 10px 0 10px;}
div の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されます) div の最終的な幅は 280px ですが、IE6 などではブラウザ上の幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、 div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

これについて/**/ に次の変更を加えることができます。IE5 と Firefox がサポートしていることだけがわかります。そうではありません。誰かがそれを理解している場合は、教えてください、ありがとう！ :)
11. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初に ul{margin:0;padding:0;} を定義すると
ほとんどの問題は解決できます

もの注:
1. float div は閉じている必要があります。
例: (floatA と floatB の属性が float:left; に設定されている場合)
ここの NOTfloatC はパンを続けたくありませんが、下に移動したいと考えています。
このコードは IE では問題ありませんが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
の間に を追加します
最も適切な場所に配置する必要がありますfloat 属性を持つ 2 つの div と同じレベルにある必要があります。それらの間にネストされた関係は存在できません。そうでない場合は、例外が発生します。
そして、クリアスタイルを次のように定義します: .clear{
clear:both;}
さらに、高さを自動的に調整できるようにするために、この時点でボックスに float が含まれる場合は overflow:hidden; を追加します。現時点では、高さの自動調整は IE では無効です。互換性を実現するには、IE のレイアウト プライベート属性をトリガーする必要があります。
たとえば、ラッパーは次のように定義されます: .colwrapper{
overflow:hidden;
margin:5px auto;}
2. マージンを 2 倍にする問題。
IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。
解決策は、この div に
を追加することです。
対応する CSS は
#IamFloat{
margin:5px;/ * IE では 10px*/ として解釈されます
display:inline;/*IE では 5px*/ として解釈されます
3. コンテナの包含関係について
多くの場合、特にコンテナー内に 2 つまたは 3 つの float div などの並列レイアウトがある場合、幅の問題が発生しやすくなります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。
4. 高さの問題について
コンテンツが動的に追加される場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (時々自動的に開かないようです。何が起こっているのかわかりません。)
5. 最も無慈悲な方法 - !重要
いくつかの詳細な問題を解決する方法が本当にない場合は、これを使用できます。メソッド。FF は "!重要な" です」が最初に自動的に解析されますが、次のように、IE はそれを無視します。 ; /*FF のスタイル*/
background: url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* IE のスタイル */}
文 xxxx !重要であることに注意してください。別の文の上に配置する必要があります。これはすでに上で述べたものです
IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性が悪化しています。IE7.0 の互換性の問題を解決するために、次の記事を見つけました。
現在、IE6 の場合は、主に ! important を使用しています。 Firefox テストは正常に表示されますが、ie7 は ! important を正しく解釈できるため、ページが必要どおりに表示されなくなります。検索した結果、「*+html」を使用するという IE7 用の良いハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。
次のような CSS を作成します:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: # 999; } /* IE7 */
すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。これらは互いに干渉しません。



CSS はブラウザの互換性にとって非常に重要です。通常、IE と Firefox の間には大きな解析の違いがあります。互換性の点は次のとおりです。

一般的な互換性の問題:

1.DOCTYPE は CSS 処理に影響します

2.FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は動作しません

3.FF: body の場合text-align に設定されています。div は、中央に配置されるように margin: auto (主に margin-left、margin-right) を設定する必要があります

4.FF: パディングを設定した後、div の高さと幅は増加しますが、IE は増加しませんしたがって、もう 1 つの高さと幅を設定するには ! important を使用する必要があります

5.FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FF のスタイルを特別に設定できます

5. の垂直方向のセンタリングの問題div:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px; 次にテキストを挿入すると、垂直方向の中央に配置されます。欠点は、ラップせずにコンテンツを制御する必要があることです

7.cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、IE のみが可能です

8.FF: に境界線と背景色を追加しますリンクの場合は、display: block を設定する必要があります。同時に float: left を設定すると、改行がないことが保証されます。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。

9. Mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序は異なっていてはいけないことに注意してください。 A Jie 氏によれば、属性 ! important は IE では認識されませんが、他のブラウザでは認識されるそうです。つまり、IE では実際には次のように解釈されます:
div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important; と書くことはできません

10. IE5 と IE6 のボックス 一貫性のない解釈
IE5 では
div{width:300px;margin:0 10px 0 10px;}
div の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されます) div の最終的な幅は 280px ですが、IE6 および他のブラウザーの幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/ IE5 と Firefox がサポートしていることだけがわかりますが、IE6 はサポートされていません。誰かがわかったら、教えてください、ありがとう！ :)

11. Mozilla ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持つため、
ul{margin:0;padding:0;} を定義してください
まずほとんどの問題を解決します

注:

1. float div は閉じている必要があります。

例: (floatAとfloatBの属性はfloat:left;に設定されています)
#div>
;#div> #div>ここの NOTfloatC は、翻訳を続行することを望んでいませんが、下に移動したいと考えています。
このコードは IE では問題ありませんが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
#div> の間に追加します
#div> ;#div>
この div は宣言の位置に注意し、float 属性を持つ 2 つの div と同じレベルに配置する必要があります。それらの間にネストされた関係はありません。それ以外の場合は例外が生成されます。
そしてクリアスタイルを次のように定義します:
.clear{
clear:both;}
さらに、高さを自動的に調整できるようにするために、ボックスに
が含まれている場合に overflow:hidden; を追加します。 float このとき、IE では高さの自動調整は無効です。このとき、IE のレイアウトのプライベート属性をトリガーする必要があります (邪悪な IE!)。これにより、互換性が実現されます。
例えばラッパーは次のように定義します:
.colwrapper{
overflow:hidden;
margin:5px auto;}

2. マージン2倍の問題。

IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。
解決策は、display:inline; を追加することです
例:
#div>
対応する CSS は次のとおりです
#IamFloat{
float:left; 5px;/*IE では 10px として認識されます*/
display:inline;/*IE では 5px*/ として認識されます

3. コンテナの包含関係について

多くの場合、特にコンテナ内の並列要素です。たとえば、2 つまたは 3 つの float div をレイアウトする場合、幅の問題が簡単に発生する可能性があります。 IE では、外側の層の幅は、より広い内側の div によって圧迫されます。ピクセルレベルの精度で測定するには、必ず Photoshop または Firework を使用してください。

4. 高さに関する質問

コンテンツが動的に追加される場合は、高さを定義しないことが最善です。ブラウザは自動的に拡大縮小できますが、静的コンテンツの場合は高さを設定するのが最善です。 (自動的に開かない場合もあるようです。何が起こっているのかわかりません)

5. 最も無慈悲な方法 - !重要

いくつかの詳細な問題を解決する方法が本当にない場合は、次の方法を使用できます。このメソッドでは、「 ! important 」の FF が最初に自動的に解析されますが、IE は次のように無視します。 ; /*FF のスタイル*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* IE のスタイル */}

xxxx !重要な文に注意してください。別の文の前に置く必要があります はい、上で説明しました
------------------------------------ ---------- -------------------------------------- ---------- ------------------------------------
を見直してみましょう。まずは IE のボックス モデルをクラックします
IE 悪名高いバグ ボックス モデルは、IE6/Win より前のすべてのバージョンに存在します。このバグは、tantak が最も広く流通しているハックをリリースするまで修正されませんでした

http://www.tantek.com/CSS。 / Examples/boxmodelhack.html

IE6 は下位互換性がありますが、IE6 には実際には 2 つのコアがあり、ドキュメント タイプ (DOCTYPE. ) ドキュメントへの宣言。正しいボックスモデルを受け入れることができるのは IE6 だけです
したがって、正しく動作するには、tanak のハックが正しい DOCTYPE でドキュメントに含まれている必要があります
Quote
div.content {
width:400px;幅が間違っています。ブラウザは
voice-family: ""}"" を読み取りました。
voice-family:inherit; // IE6/ Win を含む一部のブラウザがこの文を読むと、新しい値 (300px) が古い値を上書きします
}
html>body .content { //html>body は CSS2 で書かれています
width:300px; //CSS2 をサポートしますこのように記述したブラウザは幸運にもこの文を読むことができます
}
さて、本題に戻りますが、!重要と (スペース)/**/:を併用するこの書き方の秘密は何でしょうか？

先ほどの書き込みメソッドを見てください。この効果を達成できる別の書き込みメソッドをここで提供できます。
Quote
div.content {
width:300px ! important; //これは正しい幅で、ほとんどが!重要なタグ ブラウザはここの値を使用します
width(space)/**/:400px; //IE6/win は解析されません。この文では、IE6/win では、IE5 の場合でも幅の値が 300px であると認識されます。html>body .content { //html>body は CSS2 で書かれています
width:300px; //CSS2 をサポートするブラウザは幸運にもこの文を読むことができます
}
同様に、このメソッドは正しい文書型宣言に依存する必要があります。前述の理由により、正常に動作します。

文書型宣言は下位互換性の未来を開くスイッチのようなものですが、使い方を誤るとパンドラの箱になります
-------------------- --- --------------------------------------------------- --- ------------------------------------------------
ie7.0の登場、関係なくie6.0 の進歩に伴い、ie7 と ie6 の間の非互換性により、間違いなく新たな問題点が生じています。少なくともデバッグ プロセスでは、別のプログラムとそれに伴う多数の非互換性が生じています。

現時点では、ie7.0を使用しているユーザーはまだ少なく、ie6.0を使用しているユーザーが依然として大きな割合を占めています。ただし、IE6 テストに合格した Web ページの多くは、IE7.0 では正しく表示されません。

ie7.0 の公式説明によると:

ie7.0 では、IE6 に基づく厳密モードが導入されており、カスケード スタイル シート (CSS) の解析と表示に多くの改善が含まれています。これらの改善は、開発者に信頼できる機能セットを提供しながら、W3C 推奨標準を満たすように Internet Explorer がカスケード スタイル シートを解釈する際の一貫性を向上させることを目的としています。

公用語がどれほど美しくても、ie7.0 が本当に W3C であっても、カスタマイズされたものが多すぎて、ブラウザーごとに違いが多すぎて、私たちはどうすることもできません。 IE7.0でデザインされたWebページをIE6で表示するとほとんど見苦しくなります。では、Web ページをデザインする場合、IE6.0 と Firefox の互換性の問題を解決しながら、W3C に準拠した IE7.0 にもっと従うべきでしょうか、それとも IE6.0 の 96% で妥協すべきでしょうか?この質問は実際には少し冗長ですが、私たちにできることは、おそらくモデレーションを選択し、すべてのブラウザが正常に表示されるまで可能な限りデバッグすることです。

ie7.0 と ie6.0 は互換性がありません。私が知っている限り、以下の点があります。不足または間違っている場合は、後で追加または修正してください。


1. ie7 と ie6 div+css で幅の定義が違う
幅の定義が IE6 よりも広いのはこのためです。幸いなことに、この問題は値を変更するかパーセンテージを変更することで解決できます。 2. ie7.0 では !重要なバグが修正されました。
以前は、ie6.0 の ! important 認識のバグにより、Firefox と IE の BOX モデルの解釈に一貫性がなく、ほとんどの Web 標準デザイナーはこのバグを利用して ie6.0 と Firefox の互換性を確保していました。つまり、 div {margin :30px! important;margin:28px;} を使用します。しかし、IE7.0 ではこのバグが修正されたため、IE.7.0 と互換性を持ち、同時に IE6.0 および Firefox とも互換性を持たせるにはどうすればよいでしょうか?


3. ボックス モデルの変更
IE7 では、CSS2.1 ボックス モデルに適応するようにオーバーフローの動作が変更されました。


4. 一部の CSS フィルターは IE7.0 では使用できなくなります
多くの潜在的な解析エラーが IE7 で変更されているため、以前の IE バージョンではフィルターが適切に動作しなくなる可能性があります。例: *HTML フィルター、下線フィルター、/**/コメント フィルターなど。


5. IE7.0 では、多くの非標準 CSS がサポートされなくなり、JS 文法の要件がより厳密かつ標準化されました。
IE6では正常に表示されるjsページの多くがIE7では正常に表示できず、エラーも出ません。 IE7.0にはjs構文に対するより厳しい要件がありますが、この仕様は説明していないようですし、それをどのように「標準化」し「標準化」するのかをすべての人に明確に示しているわけでもありません。