フロントエンドWebブラウザの互換性の問題と解決策

一般的な互換性の問題:
1、別のブラウザは、デフォルトの余白(マージン)とパディング(パディング)異なる標識
溶液:ワイルドカード*にCSS増加{マージン:0;パディング: 0;}

2、二国間の問題からIE6、IE6でセットフロートが、また、マージンを設定するには、問題の余白があるだろう
解決策:設定表示:インライン;

[設定]タブの高さはIE6で、以下10pxのある3は、IE7はの高さは自身の一連超えてしまいます
隠された、またはあなたの設定の高さよりも少ない行の高さの値を設定:ラベルセットオーバーフローの高さを超えて:ソリューション

図4は、写真のデフォルトの間隔がある
レイアウトIMG用フロート用途:ソリューション

5、IE9は、お使いのブラウザは不透明度使用することはできません
解決策:
アルファ(不透明度= 50);フィルタ:プログラムID:;:不透明度フィルター0.5 DXImageTransform.Microsoft.Alpha(スタイル= 0、不透明度= 50)。

図6に示すように、オーバーラップマージン、隣接する二つの要素が余裕代が設けられている場合には、マージンが最大になります、最小値が破棄;
解決策:重複するエッジを防止するために、親要素のサブ要素に添加することができます、親要素が配置されてオーバーフローである:隠されました。

図7に示すように、カーソル:手ハンド表示タイプはサファリでサポートされていない
ソリューション:統一使用カーソル:ポインタ

図8に示すように、二のブロックレベル要素、親要素がオーバーフロー提供される:自動;子要素の設定位置:相対;およびIE6における親要素よりも高さが大きいほど、IE7オーバーフロー隠れていないであろう。
溶液:親要素のセット位置:相対

スキル:CSSハック

私は三つのカテゴリーにブラウザのハックを使用することができます; IE7や旅行、IE6その他(IE8クロムFFサファリ、オペラ、など)

ハックはIE6 _アンダースコアの理解とアスタリスク*
IE7の旅行アスタリスクをハック*満たされている(上記の質問6を含む!重要なのはハックがあるが、あまり実用的と考えることができます。)

  例えば、CSSの設定高さ:300ピクセル; *高さ:200pxの; _height:100ピクセル;
高読むためにIE6ブラウザ:300ピクセル時は高300ピクセルで考慮されます。IE6読んだときに読んで、彼はそう、* heihgtを認識しました*高さ:200pxの時間が優先されます
高さが200pxのあることを、セットする前に競合を。彼が設定200pxの高が上書きされますので、上の読み取りは、IE6も_heightを認識し、高さを100pxにに設定され、
IE7と旅行上下セット300ピクセルの高さから同じ読み取りです。彼らは_heightを知らないのでheight200pxは、停止する*読んだとき。彼らは非常になり
200pxのに解決、ブラウザの残りの部分は第1の高さを認識:300ピクセル、高さを、彼らは300ピクセルに解決されますので。

書き込みの順序が非常に重要であるので、同じと相反する属性なので、優先度の設定は、以前のものを上書きします。

/ * CSS属性レベル*ハック/
カラー:レッド; / *すべて*のブラウザでは、識別することができます/

_color:赤; / * IE6しか識別しました* /

*色:赤; / * IE6、IE7認識* /

+色:赤; / * IE6、IE7認識* /

* +色:赤; / * IE6、IE7認識* /

[色:赤; / * IE6、IE7認識* /

色:赤\ 9; / * IE6、IE7、IE8、IE9识别* /

色:赤\ 0; / * IE8、IE9認識* /

色:赤\ 9 \ 0; / * *のみIE9識別/

色:赤\ 0; / * *のみIE9の識別/

!カラー:赤重要; / * IE6が重要なの危険性を認識しません* /!

/ * CSSセレクタステージハック/
* {HTML #demo色:赤;} / * *のみIE6識別/

*+html #demo { color:red;} /* 仅IE7 识别 */

本体:n番目の型( 1)#demo {色:赤;} / * IE9 +、FF3.5 +、クロム、サファリ、オペラが識別することができる
* /
ヘッド:最初体#demo {子供+色:赤。 } / * IE7 +、FF、クロム、サファリ、オペラ*識別することができます/

:ルート#demo {色:赤\ 9;} / * *のみIE9識別/
少ないフローティング、以下のコードは、より柔軟なページとなり、ページがよりスケーラブルであろう。

CSS属性の接頭辞の意味:

    • 使用TridentブラウザのIE、Maxthon、TTカーネル:;
    • 使用Geckoブラウザカーネル:Netcape6と上記のバージョンFireFox
    • 使用Prestoブラウザカーネル:Opera7以上。
    • 使用WebkitブラウザのSafari、Chromeカーネルを:
    • インターネットリファレンスソース:https://www.cnblogs.com/kzxiaotan/p/11846926.html

おすすめ

転載: www.cnblogs.com/jiaqi1719/p/12565415.html