マルチブラウザCSS互換性解析まとめ_体験交流

CSS 互換性のポイント:
1. DOCTYPE は CSS 処理に影響します。
2. FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE では中央に配置できません。
3. FF: 本文に text-align を設定する場合、div は margin: auto (主に margin-left、margin-right) を中央揃えに設定する必要があります。
4. FF: パディングを設定した後、div は高さと幅を増やしますが、IE は増やしません。そのため、追加の高さと幅を設定するには ! important を使用する必要があります。
5. FF: ! important をサポートしますが、IE はそれを無視します。! important を使用して FF に特別なスタイルを設定できます。
6. div の垂直方向の中央揃えの問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、コンテンツをラップするのではなく、コンテンツを制御する必要があることです。
7. カーソル: ポインタは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ表示できます。
8. FF: リンクに境界線と背景色を追加するには、改行がないように、display: block と float: left を設定する必要があります。メニューバーに関して、aとメニューバーの高さを設定するのは、下端の表示がずれないようにするためであり、高さを設定しない場合は、メニューバーにスペースを挿入することができます。

XHTML CSS 互換性ソリューションの小さなコレクション
XHTML+CSS アーキテクチャの使用には多くの利点がありますが、確かにいくつかの問題もあります。未熟な使用法または不明確な思考によるものであるかどうか、最初にいくつかの概要を説明します。私が遭遇した問題の例 問題は、皆さんが周りを見回す必要がないように以下に書かれています ^^

1. mozilla Firefox と IE の BOX モデルの解釈に一貫性がなく、結果として 2px の違いが生じます。解決策:
コードをコピー コードは次のとおりです。

これら 2 つのマージンの順序を逆にしてはいけないことに注意してください。Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザでは認識できるそうです。したがって、IE では実際には次のように解釈されます:

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important; と書くことはできません。

2. IE5 と IE6 の BOX 解釈は、IE5 div では矛盾します。 {width:300px;margin:0 10px 0 10px;}div の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されます。IE6 などでは、div の最終的な幅は 280px です。ブラウザの幅は300px 10px (右パディング) 10px (左パディング) = 320px と計算されます。現時点では、次の変更を行うことができます:
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これが何を意味するのかよくわかりません /** / は、IE5 と Firefox はサポートしているが、IE6 はサポートしていないということしか知りません。誰かがそれを理解している場合は、教えてください。ありがとうございます。 :)

Mozilla ではデフォルトで 3.ul タグにパディング値がありますが、IE ではマージンのみが値を持つため、最初にそれを定義します:

のほとんどを解決できます。問題点 。

4. スクリプトに関しては、xhtml1.1 では language 属性がサポートされていないため、コードを