ホームページ > 記事 > ウェブフロントエンド > よく発生するブラウザの互換性の問題_html/css_WEB-ITnose
よく発生するブラウザの互換性の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:48:13992ブラウズ
1. ブラウザのデフォルトのマージンとパディングは異なります。解決策は、グローバル *{margin:0;padding:0;} を追加して統合することです。
2. IE6 の二重マージンのバグ: ブロック属性ラベルがフローティングされ、水平方向のマージンが存在すると、IE6 で表示されるマージンが設定値よりも大きくなります。
解決策: 1. float ラベル スタイル コントロールに display:inline; を追加して、inline 属性に変換します。
2.ハック方法を使用する: margin: 10px 0 0 10px; 高さが自分で設定した高さを超えています。その理由は、IE8 より前のブラウザでは要素のデフォルトの行の高さが設定されているためです。解決策は、overflow:hidden を追加するか、line-height をより小さい高さに設定することです。
.one{ height:5px; width:100px; background:#F60;} HTML は変更されておらず、依然として 06001a16c1782d0d0c880641f27863e716b28748ea4df4d9c2150843fecfba68 であり、IE6 では次のように表示されます:
一目見ただけで、それであることがわかります。 5px 以上の場合、CSS は次の 2 つに変更されます。 そのうちの 1 つで十分です:
.one{ height:5px; width:100px; overflow:hidden; background:#F60;}/*--或--*/.one{ height:5px; width:100px; font-size:2px; line-height:2px; background:#F60;} ここで line-height: 2px を追加した後、font-size も追加する必要があることに注意してください。効果は次の図に示すとおりです。
4. min-height は IE6 では機能しません。解決策は、 height:auto ! important;height:xxpx; を追加することです。xx は min-height で設定された値です。
可変コンテンツ (ユーザーのコメントなど) を含む一部のレイヤーの場合は、コンテンツが 1 行のテキストであっても、あまり見苦しくならないように、最小の高さ (30 ピクセルなど) が必要です。同時に、コンテンツが比較されることを願っています。場合によっては、レイヤーの高さが自動的に拡張されることがあります。これは、height: auto が必要であることを意味します。このとき、cssのmin-height属性を設定することができます。 min-height は Firefox では機能しますが、IE6 では認識されません。 次の解決策を使用できます:
.div_class{ min-height:30px; height:auto !important; height:30px; } 最初の行の min-height:30px; の設定は Firefox で有効であり、その直後の "! important" も Firefox で有効です。 Firefox専用のタグです。 このタグによる設定が最優先となり、それ以降の設定は無効となります。したがって、3 行目の height: 30px は Firefox では無効ですが、IE6 は min-height と "! important" を認識できないため、IE はデフォルトで高度に適応性があるため、3 行目のみが有効になります。 30px が設定されています。コンテンツが多い限り、高さは自動的に拡張されます。height:auto を設定する必要はありません。
!重要な互換性を以下の図に示します。
5. 透明度については、IE は filter:Alpha (Opacity=60) を使用しますが、他の主流ブラウザは opacity:0.6;
6 を使用します。 ) ネストされたタグの下の img タグには、IE の下に枠線が表示されます。解決策は、img{border:none;} スタイルを追加することです。
7. 入力枠の問題。通常、border:none; を使用して入力境界線を削除できますが、IE6 の入力スタイルの解析時のバグ (優先度の問題) により、これは IE6 では無効です。
ボーダーを含む IE6 のデフォルトの CSS スタイルは、border-style:inset;border-width:2px; ブラウザは最初に独自のカーネル解析ルールに従って独自のデフォルト CSS を解析し、次に、開発者はタグをレンダリングする目的を達成する必要があります。 IE6 の INPUT のレンダリングにはバグがあり、border-width または border-color が設定されている場合にのみ、IE6 は border-style:none; を解析します。
解決策は、 border:0 または border:0 none; または border:none:border-color:transparent; を使用することです。3 番目の解決策をお勧めします。
8. 親タグと子タグの間にマージンを使用する場合の問題は、IE (6/7) 以外のブラウザでは子タグのマージンが親タグに転送される場合がありますが、IE6&7 では転送されないことです。 2 つ以上のブロック レベル ボックスの垂直方向に隣接する境界マージンが重なり、結果として得られる境界幅は、隣接する境界幅の中で最大になります。水平方向のマージンが一致することはありません。テストコード:
<body> <style type="text/css"> .box1{ height:150px; background:#CCC; } .box1_1{ height:50px; margin-top:50px; background:#AAA; } </style> <div class="box1"> <div class="box1_1">box1_1</div> </div></body>
chrome & FireFox & IE8 & IE9 での効果:
IE6 & IE7 での効果:
これら 2 つの表示効果については、IE6 & IE7 が正しいと思います。誰か説明してもらえないでしょうか。
解決策は、親ラベルと子ラベルの間にパディングを使用し、兄弟ラベルの間にマージンを使用することです。
9. 2 つの div があり、最初の div はフローティングですが、2 番目の div はフローティングになっていないとします。ただし、2 番目の div は最初の div の端に移動し、その間にまだ隙間があります。標準ブラウザでは、1枚目と重なる2枚目です。テストコード:
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .one{ float:left; height:50px; } </style> <div class="one">One</div> <div class="two">Two</div></body> 通常は次のようになります:
IE6 では次のようになります:
2 つの div をオーバーラップする必要がある場合は、設計のアイデアを変更することができます。それを実現するには、次のコードを使用します:
<body> <style type="text/css"> div{ width:100px; height:100px; border:1px solid #CCC; } .parent{ position:relative; } .one{ position:absolute; left:0; top:0; } </style> <div class="parent"> <div class="one">One</div> <div class="one">Two</div> </div></body>