一般的なブラウザ互換性の問題と解決策(面接問題)

1,ブラウザ互換性の問題1:異なるブラウザのラベルのデフォルトのmarginとpaddingが異なる
問題症状:いくつかのラベルを勝手に書き、スタイルコントロールを付けない場合、それぞれのmarginとpaddingの違いが大きい.
遭遇頻度:100%
ソリューション:
Normalizeを使用してデフォルトのスタイルをクリアできます.具体的には、記事を参照してください.さあ、Normalizeについてお話ししましょう.css
次のコードも使用できます.

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

 
2,ブラウザ互換性の問題2:ブロック属性ラベルfloat後、また横行するmarginがある場合、IE 6にmarginが設定より大きいことを表示する
質問症状:よくある症状はIE 6の後ろの1つが次の行に突き刺さることです
遭遇頻度:90%(少し複雑なページでは、floatレイアウトで最も一般的なブラウザ互換性の問題)
ソリューション:floatのラベルスタイル制御にdisplay:inlineを追加します.行の属性に変換
備考:私たちが最もよく使うのはdiv+CSSレイアウトで、divは典型的なブロック属性ラベルで、横レイアウトの時私たちは通常div floatで実現して、横の間隔の設定はmarginで実現すれば、これは必然的に出会う互換性の問題です.
 
3、ブラウザの互換性の問題3:小さい高さのラベル(一般的に10 px未満)を設定して、IE 6、IE 7で、漫遊の中で高さは自分の設定の高さを超えます
質問症状:IE 6、7と遊泳中のこのラベルの高さは制御されず、自分で設定した高さを超えている
遭遇頻度:60%
ソリューション:高さを超えたラベルにoverflow:hiddenを設定します.または、行の高さline-heightを設定すると、設定した高さより小さくなります.
メモ:この場合は、小さな円角の背景を設定するラベルに表示されます.この問題は、IE 8以前のブラウザがラベルに最小デフォルトの行の高さを与えるためです.ラベルが空であっても、このラベルの高さはデフォルトの行の高さに達します.
 
4,ブラウザ互換性の問題4:ライン内属性ラベル、display:blockを設置した後にfloatレイアウトを採用して、また横行するmarginの情況があって、IE 6ピッチbug
質問症状:IE 6の間隔比が設定した間隔を超えている
発生率:20%
ソリューション:display:block;後はdisplay:inline;display:table; 
メモ:行内のプロパティラベル、幅を設定するにはdisplay:blockを設定する必要があります.(input/imgラベル以外は特殊です).floatでレイアウトされ横marginがあると,IE 6ではブロック属性float後の横marginのバグを持つ.ただし、それ自体が行内属性ラベルなので、display:inlineを加えると、その高さと幅は設定できません.この場合、display:inlineの後ろにdisplay:talbeを追加する必要があります.
 
5,ブラウザ互換性の問題5:画像のデフォルトに間隔がある
問題の症状:いくつかのimgラベルを一緒に置くと、デフォルトの間隔があるブラウザもあり、ワイルドカードで間隔をクリアしても機能しません.
発生率:20%
ソリューション:floatプロパティを使用してimgレイアウト
メモ:imgタグは行内属性タグなので、コンテナの幅を超えない限りimgタグは1行に並べられますが、一部のブラウザのimgタグの間には間隔があります.この間隔を外してfloatを使うのが正道です.(負のmarginも使えますし、解決できますが、負のmargin自体はブラウザ互換性の問題を引き起こしやすい使い方なので、なるべく使わないようにしましょう)
 
6,ブラウザ互換性問題6:ラベル最低高さ設定min-height互換性なし
質問:min-height自体が互換性のないCSS属性であるため、min-heightを設定する際に各ブラウザにうまく互換性がありません
当たる確率:5%
ソリューション:ラベルの最小高さ200 pxを設定する場合は、{min-height:200 px;height:auto!important;height:200 px;overflow:visible;}に設定する必要があります.
備考:B/Sシステムのフロントエンド開発では、このようなニーズがある場合が多い.コンテンツが1つの値(300 pxなど)未満の場合.容器の高さは300 pxである.コンテンツの高さがこの値より大きい場合、スクロールバーではなくコンテナの高さが高くなります.この場合、この互換性の問題に直面します.
 
7,ブラウザ互換性の問題7:透明度、フィレット、シャドウなど、さまざまな特殊なスタイルの互換性.特殊なスタイルはブラウザごとにコードの違いが大きいので、資料を調べて異なるブラウザに異なるコードを書くことで解決するしかありません.
 
8、フローティングのクリア:

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }

  
9、ボックスモデル

Element {
        box-sizing: border-box;
        /*box-sizing: content-box;*/
    }

 
/* CSS hack*/ 
私はhackerをあまり使いません.個人的な習慣かもしれませんが、書くコードIEが互換性がなく、hackで解決します.しかしhackerはとても使いやすいです.hackerを使ってブラウザを3種類に分けることができます:IE 6;IE 7と漫遊;その他(IE 8 chrome ff safari opera等)
◆IE 6認識のハッカーは下線です_アスタリスク*
◆IE 7漫遊で知り合ったハッカーはアスタリスク*
例えば、CSSの設定:

div { height: 300px; *height: 200px; _height:100px; }

IE 6ブラウザはheight:300 pxを読むと高い時300 pxと考えられます.続けて読むと、*heihgtも認識しているので、IE 6が*height:200 pxを読むと、前の衝突設定を上書きし、高さは200 pxと考えられます.続けて下へ読むと、IE 6はまだ知っています.Height、だから彼はまた200 pxの高さの設定をカバーして、高さを100 pxに設定します;
IE 7も同様に高さ300 pxの設定から下に読みます.*height 200 pxを読むと止まります.知らないからです.height.高度を200 pxに解析し、残りのブラウザは最初のheight:300 pxしか認識していません.高度を300 pxに解析します優先度が同じで衝突したい属性設定の後に1つは前を上書きするので、書く順序が重要です. 
互換ページを作る方法は、小さなコード(レイアウトの1行または1枚)を書くたびに、異なるブラウザで互換性があるかどうかを見なければなりません.もちろん、ある程度熟練すれば面倒ではありません.互換性の問題によく遭遇する初心者におすすめです.多くの互換性の問題は、ブラウザがラベルのデフォルト属性の解析を異なるため、設定さえすればこれらの互換性の問題を簡単に解決することができます.ラベルのデフォルト属性を熟知すれば、互換性の問題がなぜ発生したのか、これらの互換性の問題をどのように解決するかをよく理解できます.
実戦は問題を解決する最良の道であり、問題に直面する唯一の道でもあり、みんながもっと自分で作ってこそ、もっと速く、もっと成長することができ、また他の人の経験を参考にすることも進歩の近道である.
参照リンク:http://jingyan.baidu.com/article/d169e1864f9c53436611d8eb.html
転載先:https://www.cnblogs.com/iceflorence/p/6646344.html