ブラウザの互換性 Common_html/css_WEB-ITnose

一般的なブラウザの互換性

ブラウザの互換性の問題⼀: ブラウザごとに、タグのデフォルトの外側パッチと内側パッチが異なります

問題の症状: スタイル コントロールを追加せずにタグを記述するだけで、それぞれのマージンとパディングが大きく異なります。

遭遇頻度: 100%

解決策: CSS⾥ *{margin:0;padding:0;}

注: これは、ブラウザ互換性のための最も一般的で簡単な解決策です セクシュアリティの問題、ほぼすべての CSS ファイル先頭にワイルドカード文字 * を使用して、各ラベルの内部パッチと外部パッチを 0 に設定します。

ブラウザの互換性の問題⼆: ブロック属性タグ float の後に水平方向の margin がある場合、⼤ 問題の症状は次のとおりです: 一般的な症状は次のとおりです IE6 では、最後のブロックが次のブロックにプッシュされます

発生頻度: 90% (もう少し複雑なものでも発生します。フロート レイアウトが最も一般的なブラウザ互換性の問題です)

解決策 : float タグ スタイル コントロールに display:inline; を追加して、 inline 属性

注: 最も一般的に使用されるのは div+CSS レイアウトであり、div は通常、水平レイアウトを実装するために div float を使用します。互換性の問題は必然的に発生します。

ブラウザの互換性の問題 3:

IE6

、

IE7

で、より小さい高さのラベル (通常は

10px) を設定すると、ゲーム内の高さが設定の高さを超えます 問題の症状: のラベルの高さIE6、7、および Youyou は制御されておらず、設定された高さを超えています

遭遇頻度: 60%

解決策: 高さを超えるラベルに対して overflow:hidden を設定するか、行の高さを以下に設定します。設定した高さ。

注: この状況は通常、ラベルに小さな円の背景を設定したときに発生します。この問題の理由は、IE8 より前のブラウザでは、ラベルにデフォルトの最小行高さが設定されるためです。ラベルが空の場合でも、ラベルの高さはデフォルトの行の高さになります。

ブラウザ互換性の問題 4: ⾏内部属性タグ、

display:block

を設定し、⽤

float

レイアウトを採用する、⼜水平

マージンのケースがある、IE6間隔バグ proブレムの症状: IE6 の間隔が設定間隔を超えています

遭遇率: 20%

解決策: display:inline;

after display:block;に命令するinline 属性タグの幅を設定するには、display:block; を設定する必要があります (より特殊な input タグを除く)。 float レイアウトと水平マージンを使用した後、IE6 では、ブロック属性 float の後の水平マージンが発生するバグがあります。ただし、インライン属性ラベルなので、display:inlineを追加した場合、高さと幅を設定することはできません。このとき、display:inline の後に display:talbe を追加する必要もあります。

ブラウザの互換性の問題 5: サブ要素が ⽗ 要素の

margin-top

を誘拐する

問題の症状: この問題は主に ⾮IE ブラウザで発生します。子要素と親要素の間にコンテンツがない場合、子要素に margin-top を設定すると、子要素は移動しませんが、親要素は margin-top により下に移動します。

遭遇率: 80%

解決策: ⼊

を⽗要素と⼼子要素の間に追加します。または、親要素のpadding-topを設定します。