一般的なブラウザの互換性の問題の概要

デフォルトの外側と内側のパッチパッチマージン、パディングの異なる1.異なるブラウザタブ

発生確率:100%

ソリューション:ワイルドカード*、内側と0にパッチセット以外の使用CSS

* {マージン:0。パディング:0;}

IE6の設定よりも大きい(両側IE6のバグから)ブロック属性タグフロートだけでなく、横方向のマージン値を、表示した後、2

  発生確率:90%

   ソリューション:フロートラベルスタイルコントロールに表示を追加:インライン;

3.小さい高さラベル(一般的に以下の10pxのは)、IE6、IE7、旅行超えてその高さに設定します

発生確率:60%

ソリューション:オーバーフローの高さを超える設定]タブ:隠された;以下、設定高さよりも行の高さ、または行の高さを設定します。

4.タグライン表示:ブロック;フロートは、次にレイアウトを使用し、次いで横方向マージン値を設定し、設定よりも大きい(両側IE6のバグから)IE6で表示され

発生確率:20%

溶液:ディスプレイ:ブロック;ディスプレイ続い:インライン;ディスプレイ:テーブルと

5.画像は、デフォルトの間隔を持っています

発生確率:20%

解決策:レイアウトIMGのための使用フロート

6.ラベルセットの最小高さは、互換性のある最小の高さではありません

発生確率:5%

ソリューション:たとえば、200pxの高さの最小値のラベルを設定するには

{最小高さ:200pxの。

 高さ:オート重要;!

高さ:200pxの。

オーバーフロー:目に見えます;}

7.透明性の互換性設定

発生の確率:主にあなたが何かを書く参照するには、何の透明度を設定していません

ソリューション:単語

transparent_class {   

    フィルタ:アルファ(不透明度= 50)。   

       -moz-不透明度:0.5。   

       -khtml-不透明度:0.5。   

       不透明度:0.5;   

 } 

不透明度:0.5; それはCSSでcurrentstandardであるため、これは「最も重要」です。これは、Firefox、Safariのほとんどのバージョンで動作しますが、andOpera.Thisは、すべてのブラウザは、現在の規格をサポートしている場合、あなたが必要とするすべてのだろう。これは、もちろん、そうではありません。

フィルタ:アルファ(不透明度= 50)。この1あなたは、IEのために必要です。

-moz-不透明度:0.5。あなたは、Netscape NavigatorのようなtheMozillaブラウザの道古い学校のバージョンをサポートするために、このいずれかが必要。

-khtml-不透明度:0.5。それは使用していたtherenderingエンジンがまだthecurrentにasopposed KTHML、と呼ばれたとき、これはサファリの古いバージョン(1.1)の方法のためにある  のWebKit  。

 

バグの8ボックスモデル

説明:、マージンおよびパディング値を設定するようにしても、同時に素子の高さと幅を設定するための要素の実際の大きさを変更します。

解決策は:divの中でマージンとパディング、マージンとパディングの設定値を増加させるためのdivの必要性の内側のdivを追加します。

リスト李は9 IE6のバグを階段

説明:li要素は、フロートフロートを提供する(例えば、)通常は、それ自体は、Liフロートありません。

ソリューション:

UL李{フロート:左;}

或UL李{表示:インライン;}

10.liホワイトスペース

説明:ではIEは、リチウムとLiの間の垂直間隔を増加します

解決策:李内側に明示的な幅または高さを追加

李{幅:20ピクセル;}

若しくは

李{表示:ブロック;フロート:左;クリア:左;}

若しくは

李{表示:インライン;}

リーA {表示:ブロック;}

若しくは

同一の各リストリチウム、リチウム色と背景色の下部に実線を提供

11.overflow:自動;位置:相対衝突

説明:この問題だけIE6とIE7、二のブロックレベル要素、親要素が提供され、オーバーフローが発生:オート;子要素の設定位置:相対;および親要素よりも高さも大きいが、要素が中性子IE6-7でありませんしかし、オーバーフロー隠されました。

ソリューション:また、位置設定し、親要素与える:相対;

前記フローティング層ずれ

説明:コンテンツが超えるとフローティング層によって規定される外側容器の幅は位置ずれの問題を引き起こすであろう。Firefox、IE7、IE8および他の標準的なブラウザで、ちょうどエッジを超えてコンテンツを超えて、しかしIE6容器には、コンテンツの幅の成長及び増殖と幅誤っ、定義された幅の値を無視します。浮動要素はまた、浮動要素が続いた後、場合、それは転位の問題につながります。

ソリューション:オーバーフロー:隠されました;

クローニングテキストバグ13.IE6

説明:次のようにあなたのコードが構成されている場合

<! - これはコメントです - >

    <div>

       ......

   </ div>

<! - これはコメントです - >

空白のページIE6の上にテキストで表示される可能性があります

ソリューション:

条件付きコメントを使用します

すべてのコメントを削除します。

以前のコメントでそのフローティング要素プラスディスプレイ:インライン。

14.IE画像が拡大表示します

説明:IEで画像を拡大縮小、時には彼らの品質に影響を与えます

溶液:IMG {-Mg補間モード:バイキュービック;}

透明バグの15.IE6 PNG画像の下で

説明:透明画像、または使用PNG24のPNG32画面表示の写真は以下のIE6で赤ちゃん青の背景を持っています。

ソリューション:

.IMG {

背景:URL( 'http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');

_background:0;

_filter:プログラムID:DXImageTransform.Microsoft.AlphaImageLoader(SRC = 'のhttp://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');

}

IMG {フィルタ:プログラムID:DXImageTransform.Microsoft.AlphaImageLoader(SRC = 'HTTP://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}

若しくは

<IMGSRC = "test.png" 幅= "247" 高さ= "216" スタイル= "フィルタ:プログラムID:DXImageTransform.Microsoft.AlphaImageLoader(SRC = 'のhttp://shenmo.wanmei.com/images/logo/sm_logo_202x104。 PNG」、sizingMethod = '規模');」ALT = "" />

16. <iframe>のバグ透明の背景

   説明:IEブラウザでは、<iframe>のフレームが自動的に背景を透明に設定しません。

   ソリューション:

    <iframesrc = "content.html" allowTransparency = "真の"> </ iframe>の

   iframeの呼び出しでcontent.htmlページに設定します

   体{}

16.無効にIEのデフォルトの垂直スクロールバー

ソリューション:

HTML {

   オーバーフロー:自動;

}

 

これらは、ここでは、一般的な互換性の問題です私は遭遇したいくつかの素晴らしい互換性の問題です

 

1.とき.CURのセットカスタムスタイルにカーソルを、別のブラウザの互換性の問題静的カーソルファイル

発生の確率は:とにかく、私は、生と死は、Firefoxブラウザに出ることができない、他の完璧に走りました

  あなたは問題なく、文を記述する場合、完全な互換性。しかし、1つのまたは2つのスタイルは、カーソルを出て、カーソルが他のディスプレイに置き換えることができますがあり適切に表示することができ、そしておめでとう、私は正確に同じ問題に会いました。.CURファイル形式は問題であり、

.CUR形式は異なる色深度であろう画像に応じて異なるフォーマットを生成します。

色深度を変更することにより、互換性のあるクロスブラウザを達成することができ、フォーマットを調整します。

PS私が具体的にUIに従事していなかったので、またCUR絵を理解していない、Firefoxで256色のいくつかのカーソルの色深度が、いくつかは、あなたが、その特定の問題を分析するために、とにかく、変化に変更しようとしていることができます認識しません、私がここにいるトゥルーカラーこの深さすべての画像は、完全に互換性があります。

以下では、色深度を変更するためにそれを使用することができ、RealWorldCursorEditorのCURカーソルを作る小さなソフトウェアを添付します

カーソル:URL(画像/ arrow.cur)、オート; / *オートマウスの非作動状態アイコンカスタム* / 

2. IE6非表示にして求めます

説明:コンテナの高さが浮動要素の後ろにあふれんばかりで非浮動要素が続いているためでIE6は、いくつかのアイテムが隠されているように見えるが、リフレッシュが再び表示されますが、これは、これらの要素は持っているいくつかの非浮動定義された:ホバーリンク。

解決策:浮動のすべての種類を削除します。

おすすめ

転載: www.cnblogs.com/lanlanJser/p/11932793.html