Web ページを FireFox と IE_html/css_WEB-ITnose の両方に対応させる-htmlチュートリアル-php.cn

Web ページを FireFox と IE_html/css_WEB-ITnose の両方に対応させる

WBOY

リリース： 2016-06-24 11:39:15

オリジナル

990 人が閲覧しました

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

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

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

FireFox: パディングを設定した後、div は高さと幅を増加させますが、IE は増加させないため、! important を使用して追加の高さと幅を設定する必要があります。

FireFox: ! important をサポートしますが、IE はそれを無視します。 ! important を使用して FireFoxFF 専用のスタイルを設定できます。

div の垂直方向の中央揃えに関する問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、コンテンツをラップするのではなく、コンテンツを制御する必要があることです。

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

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

XHTML+CSS フレームワークを使用することには多くの利点がありますが、未熟な使用によるものであるか、不明確な思考によるものであるかにかかわらず、実際にいくつかの問題があります。最初に、皆さんが周りを見回さないように、私が遭遇した問題のいくつかを以下に書き留めておきます。。

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

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

これら 2 つのマージンの順序は次のとおりである必要があることに注意してください。 ! important 属性は IE では認識されませんが、他のブラウザでは認識されると言われています。実際、IE では次のように解釈されます:

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

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

2.IE5 と IE6 IE5 では、BOX の解釈に一貫性がありません。 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}

これについて/**/www.100sucai.com とは何ですか? IE5 しかわかりません。 Firefox はサポートしていますが、IE6 はサポートしていません。誰かが理解している場合は、教えてください。ありがとうございます。 :)

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

ul{margin:0;padding:0;}

でほとんどのことが解決できます問題の質問の。

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