DIV+CSS の互換性の問題 (2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div+css が IE と firefox に互換性がある問題について

最終的に作成された div+css Web ページは W3C 標準に完全に準拠しています。 IE7 で表示は完璧でしたが、Firefox でテストしてみると、わかりにくいことがわかりました

見た目はひどいものでした。いくつか調べた結果、互換性は非常に簡単であることがわかりました。

1. div {overflow: hidden;} を追加します。目的は、div をコンテンツの高さに自動的に適応させることです。

2. 水平方向の div コート div

さらに、

ul {

margin: 0px;
padding: 0px;
}
li の前のスペースを削除するためです

div+css の互換性の問題

CSS 互換性ポイント: DOCTYPE は CSS 処理に影響します

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

FF : bodyにtext-alignが設定されている場合、divはmargin: auto (主にmargin-left、margin-right)を設定する必要がある

Centered

FF: 設定後パディングすると、div は高さと幅を増加させますが、IE は増加させません。したがって、追加の

高さと幅

を設定するには ! important を使用する必要があります。

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

のスタイルを特別に設定することが重要です

div:vertical-align:middle; の垂直方向のセンタリングの問題により、行間隔が増加します Line-height: 200px が DIV 全体と同じ高さになります。その後、テキストを挿入すると垂直方向になります。中心にあります。欠点は

ラップせずにコンテンツを制御するには

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

FF: 境界線と背景色をオブジェクトに追加するにはリンクの場合は、display: block を設定する必要があります。また、float: left を設定すると、改行がないことが保証されます。

メニューバーを参照して、メニューバーの高さを設定することは、下端の表示のずれを避けるためです。高さを設定しない場合は、メニューバーにスペースを挿入することができます。XHTML+CSS互換性ソリューション。

XHTML+CSS アーキテクチャを使用するメリットたくさんありますが、未熟な使い方によるものなのか、不明確な考え方によるものなのか、実際にいくつかの問題があります。まず、私が遭遇した問題のいくつかを以下に書きます。

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

div css xhtml xml ソースコードの例 [www.52css.com]

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

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

div css xhtml xml ソースコード例ソースコード例 [www.52css.com]

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 css xhtml xml ソースコードの例ソースコードの例 [www.52css.com]

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

これが何なのかよくわかりませんが、IE5 と Firefox はサポートされていないということしかわかりません。理解している人がいたら教えてください。 :)

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

div css xhtml xml ソースコード例ソースコード例 [www.52css.com]

ul { margin:0;padding:0;}

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

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

div css xhtml xml サンプルソースコードに変更するだけです。ソースコード例 [www.52css.com]

著者別の最新記事