CSS互換性のポイント分析_体験交流

IE と FF

CSS の互換性ポイント:

DOCTYPE は CSS 処理に影響します

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

FF: 本文に text-align を設定する場合、div は margin: auto (主に margin-left、margin-right) を中央揃えに設定する必要があります

FF: Afterパディングを設定すると、div は高さと幅を増やしますが、IE はそれを認識しないため、! important を使用して追加の高さと幅を設定する必要があります

FF: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して

div のスタイルを FF 専用に設定できます。 垂直方向の中央揃えの問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px;そして垂直方向の中央に配置されます。欠点は、ラップせずにコンテンツを制御する必要があることです。

cursor: ポインターは IE FF でカーソルの指の形を同時に表示できます。IE は手のみ

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

XHTML+CSS アーキテクチャを使用することには多くの利点がありますが、実際にいくつかの問題があります。それが未熟な使用によるものであるか、不明確な思考によるものであるかに関係なく、皆さんが周りを見回すのを避けるために、私が遭遇した問題のいくつかを以下に書き留めておきます^^

1. mozilla の場合 Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策:

div{margin:30px! important;margin:28px;}

逆に、Ajie 氏によると、! important 属性は IE では認識されませんが、他のブラウザでは認識されるとのことです。実際、IE では次のように解釈されます。

div{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、 margin:XXpx! important ;

2 と書くことはできません。IE5 と IE6 の BOX の解釈は一致しません。IE5 では div{width:300px;margin:0 10px 0 10px;} と解釈されます。 300px-10px (右パディング)-10px (左パディング) div の最終的な幅は 280px です。IE6 およびその他のブラウザでは、幅は 300px+10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます。

div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

、これについて/**/ IE5 と Firefox がサポートされていることだけがわかります。分かる人がいたら教えてください、ありがとう！ :)

3.ul タグには Mozilla ではデフォルトでパディング値がありますが、IE ではマージンのみに値があるため、最初に

ul{margin:0;padding:0;} を定義します

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

4. スクリプトに関しては、xhtml1.1 では言語属性がサポートされていません。コードを

<script> <BR> に変更するだけです。</script>