div+css のレイアウト_html/css_WEB-ITnose におけるブラウザの互換性の問題

Firefox の市場シェアが増加するにつれて、特に Firefox の市場シェアが高いヨーロッパでは、ブラウザの互換性の問題がますます重要になってきています。IE では問題ないように見える場合もあります。 Firefox や他のブラウザではまったく違って見えるので、とても不満に思います。

Firefox と IE を区別するときに最も一般的に使用される !payment メソッドは、他の異なるブラウザの互換性の問題に使用されます。ブラウザのさまざまなバージョンには、@import、アノテーション、属性セレクター、サブオブジェクト セレクター、音声ファミリーなどのメソッドもあります。これらのメソッドについては、「Css Website Layout Record」で説明します。

以下は IE と Firefox の間の CSS 互換性の問題です

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

2.FF: div は margin-left と margin-right を auto に設定します すでに中央揃えになっていますが、IE は機能しません

3 .FF: 本文に text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

4.FF: パディングを設定した後、div は高さを増やし、 width はサポートされますが、IE はサポートしないので、追加の高さと幅を設定するには ! important を使用する必要があります

5.FF: ! important はサポートされていますが、IE はそれを無視します。 ! important を使用して FF のスタイルを特別に設定できます。注意すべき点は、必ず xxxx !重要な文を別の文の上に配置することです

6.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 つのマージンの順序を記述してはいけないことに注意してください。 Ajie 氏によれば、その逆です。ステートメント ! 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 がサポートしていることだけがわかります。そうではありません。誰かがそれを理解している場合は、教えてください、ありがとう！ :)

11.ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初に ul{margin:0;padding:0;}

を定義すると、ほとんどの問題が解決されます

注:

1. float div を閉じる必要があります。

例: (floatA と floatB の属性は float:left; に設定されています)

ここでの NOTfloatC は、翻訳を続行するのではなく、下に移動したいと考えています。
このコードは IE では問題ありませんが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。


の間に
の宣言位置に注意してください。この div は最も適切な場所に配置する必要があり、float 属性を持つ 2 つの div と同じレベルにある必要があります。それらの間にネストされた関係は存在できません。そうしないと例外が発生します。
そしてクリアスタイルを次のように定義します: .clear{
clear:both;}

さらに、高さが自動的に適応できるようにするために、この時点でボックスに float が含まれる場合はラッパーに overflow:hidden;

を追加します、このとき、IE では高さの自動調整が無効です。このとき、IE のレイアウトのプライベート属性をトリガーする必要があります (邪悪な IE!)。これは、zoom:1; で実行できるため、互換性が実現されます。
たとえば、ラッパーは次のように定義されます: .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. マージンを2倍にする問題。

IE でフローティングに設定された div に設定されたマージンが 2 倍になります。これはie6に存在するバグです。

解決策は、display:inline;
をこの div に追加することです。例:

対応する CSS は、

#IamFloat{
float:left;
margin: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 ! important は次のようにする必要があることに注意してください。上で述べたように

IE7.0 がリリースされ、CSS サポートに新たな問題が発生しました。ブラウザの数が増え、Web ページの互換性は悪化しています。IE7.0 の互換性の問題を解決するために、私は次の記事を見つけました。 ie6 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 として表示されます。これらは互いに干渉しません。くだらない IE6 がすぐに廃止されることを心から願っています。 。 。 。