DIV+CSS ブラウザ互換性調査 2_html/css_WEB-ITnose

[転載、アーカイブ、参考]

Web ページを作成する際、ブラウザー間の互換性の問題により、異なるブラウザーでページの表示を比較的一貫して行うために、いくつかのブラウザーのハックと一部のブラウザーの違いをまとめました。ブラウザの互換性の問題に関する関連メモ。現在、ブラウザは IE7 と互換性がある必要があります。

セクション 1 CSS HACK 概要クイックチェック

ブラウザ	ハック (サポートされていないものは赤字)
IE6	"*" "_ " "9" "重要です
IE7	"*" "_" "9" "!重要"
IE8	"*" "_" "9" "!重要"
FF	"*" "_" "9" "! important"

例:

.main{

背景色: #CC00FF;すべてのブラウザは紫色に表示されます */---------All

背景color：＃ff00009; to using to using using using'''' -color: #009933; /*IE6 は緑色になります*/--------------- IE6

背景色: #000000 !重要;}/*FF は黒になります*/-------------------------------------FF

セクション 2 一般的な互換性問題のまとめ 2.1 DOCTYPE は CSS 処理に影響します

移行型: このタイプのブラウザでは、HTML4.01 のタグの使用が許可されていますが、XHTML の構文に準拠する必要があります。これは今では一般的な方法であり、DreamweaverでWebページを作成する場合はデフォルトでこのタイプになっています。

Strict タイプ: Strict タイプ。ブラウザは使用時に比較的厳密であり、要素内の bgcolor 背景色属性を直接使用するなど、いかなる形式の識別や属性の使用も許可しません。

フレームセットタイプ: フレームページタイプ。Web ページがフレーム構造を使用している場合、このようなドキュメント宣言を使用する必要があります。

2.2 エンコーディングの違いにより、IE6 は CSS ファイルを正常に解析できなくなります

Web ページは UTF-8 エンコーディング形式を使用しますが、これは問題ではありません。問題は、外部 CSS ファイルがデフォルトで ANSI エンコーディングに設定されており、UTF-8 で保存されないことです。 8フォーマット。通常の状況ではこれで問題ないかもしれませんが、CSS ファイルに中国語のコメントが含まれている場合は、満足のいくものではない可能性があります。 IE6 より前のブラウザは、この CSS ファイルを解析する際のエンコードの問題により正しく解析できないと推定されており、そのため CSS は IE6 では機能しません。 IE6を使っている人はまだたくさんいます。したがって、この問題は解決する必要があります:

方法 1: CSS、JS、および Web ページ ファイルを UTF-8 形式で保存します。

方法 2: CSS および JS 内の中国語のコメントを削除するか、英語に変更します。

上記は、エンコーディングの問題により、IE6 は CSS ファイルを正しく解析できないということです

2.3 FORM タグは、IE に MARGIN マージンを自動的に追加します

このタグは、IE ではマージンを自動的に追加しますが、FF ではマージンは 0 なので、表示に一貫性を持たせたい場合は、CSS でマージンとパディングを指定するのが最善です。上記の 2 つの問題に対処するには、CSS は通常、スタイル form{margin:0;padding:0;} を使用します。

2.4 UL タグ

Mozilla では UL タグ。 、デフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます

そこで最初に ul{margin:0;padding:0;} を定義します

2.4 MARGIN 倍増問題

IE で float に設定された div は、設定されたマージンになります。倍増する。これはie6に存在するバグです。解決策は、この div に display:inline を追加することです。例:

対応する CSS は

#imfloat{

float:left;

margin :5px; /*IE では 10px として認識されます*/

display : inline; /*IE では 5px として認識されます*/ }