IE、FFの相違点比較

4650 ワード
JavaScript ブラウザ css IE firefox
1 firefox ie 6 ie 7のcssスタイル
今はほとんど使っています!importantはhackに来て、ie 6とfirefoxのテストに対して正常に表示することができて、しかしie 7は対します!importantは正しく解釈でき、ページが要求通りに表示されない!IE 7に対して良いhackの方式を探し当てて“*+html”を使うので、今IE 7でブラウズして、問題がないべきです.
CSSを書くと次のようになります.

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

するとfirefoxではフォント色が#333、IE 6ではフォント色が#666、IE 7ではフォント色が#999と表示されます.
2 cssレイアウトでの中央揃えの問題
主なスタイルの定義は次のとおりです.
body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

説明:
まず、親要素でTEXT-ALIGN:centerを定義します.これは、親要素内のコンテンツが中央にあることを意味します.IEについてはこのように設定すればよい.
しかしmozillaでは中央には入れません.解決策は、サブエレメント定義時に設定するときに「MARGIN-RIGHT:auto;MARGIn-LEFT:auto;」を加えることです.
説明する必要があるのは、この方法でページ全体を中央にしたい場合は、1つのDIVにセットしないことをお勧めします.複数のdivを順番に取り外すことができます.各取り外したdivにMARGIN-RIGHT:autoを定義すれば、MARGIN-LEFT: auto; それでいいです.
3箱の模型は異なって解釈します.
#box{

width:600px;

//for ie6.0- width:500px;

//for ff+ie6.0

}

#box{

width:600px!important

//for ff

width:600px;

//for ff+ie6.0

width /**/:500px;

//for ie6.0-

}

4フローティングieによる2倍距離
#box{float:left;width:100 px;margin:0 0 100 px;//この場合IEは200 pxの距離display:inline;//フローティングを無視する}
ここでblock、inlineの2つの要素を詳しく話して、Block要素の特徴は:いつも新しい行の上で始めて、高さ、幅、行の高さ、マージンはすべて制御することができます(ブロック要素);Inline要素の特徴は、他の要素と同じ行にあることです.制御不可(埋め込み要素);
#box{display:block;//埋め込み要素をブロック要素display:inlineにシミュレートできます//同じ行に並ぶ効果diplay:tableを実現します;
5 IEと幅と高さの問題
IEはmin-という定義を認識していないが、実際には正常なwidthとheightをminがある場合として使用している.これで問題が大きくなり、幅と高さだけでは通常のブラウザではこの2つの値は変わらず、min-widthとmin-heightだけではIEの下に幅と高さが設定されていないことになります.例えば背景画像を設定するには、この幅が重要です.この問題を解決するには、次のようにします.
#box{ width: 80px; height: 35px;}html>body

#box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6ページの最小幅
min-widthは非常に便利なCSSコマンドで、要素の最小幅と幅を指定することができ、レイアウトが正しいことを保証することができます.しかし、IEはこれを認識していないが、実際にはwidthを最小幅として使用している.このコマンドをIEでも使用できるように、
をラベルの下に配置し、divにクラスを指定します.
CSSは次のように設計されています.
#container{

min-width: 600px;

width:e&shy;xpression(document.body.clientWidth < 600? "600px": "auto" );

}

最初のmin-widthは正常です.しかし、2行目のwidthはJavascriptを使用しており、これはIEだけが認識しているので、HTMLドキュメントがあまり正規ではありません.実際にJavascriptの判断で最小幅を実現します.
7フローティングのクリア
.hackbox{

display:table;

//              

}


  


.hackbox{

clear:both;

}

または追加:after(アーチファクト)は、オブジェクトの後に発生するコンテンツを設定し、通常contentと組み合わせて使用され、IEはこのアーチファクトをサポートせず、Ieブラウザではサポートされていないため、IE/WINブラウザには影響しません.こういうのが一番めんどくさい

......#box:after{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8 DIVフローティングIEテキストは3画素のバグを生成する
左のオブジェクトは浮動し、右は外パッチの左ピッチで位置決めされ、右のオブジェクト内のテキストは左から3 pxのピッチがある.
#box{

float:left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width:50%;

}

*html #left{

margin-right:-3px;

//     

}

HTMLコード
<DIV id=box>

<DIV id=left></DIV>

<DIV id=right></DIV>

</DIV>

9プロパティセレクタ(これは互換性とは言えません.cssを隠すバグです)
p[id]{}div[id]{}
p[id]{}div[id]{}
これはIE 6に対して.0とIE 6.0以下のバージョンはすべて非表示で、FFとOPeraの作用
属性セレクタとサブセレクタには違いがあり、サブセレクタの範囲は形式的に縮小する、属性セレクタの範囲はp[id]のように大きく、すべてのpラベルにidがあるのは同じ式である.
10 IE鬼ごっこ問題
divが複雑に適用されると各欄にいくつかのリンクがあり、DIVなどの場合は鬼ごっこの問題が発生しやすい.
一部のコンテンツは表示されず、マウスがこの領域を選択すると、コンテンツがページにあることがわかります.
解決策:layoutに対してline-heightプロパティを使用するか、layoutに固定高さと幅を使用します.ページ構造はできるだけ簡単です.
11高さ不適応
高さ不適応は、内層オブジェクトの高さが変化すると外層の高さが自動的に調整されず、特に内層オブジェクトが使用する
marginまたはpaddignの場合.例:

<div id="box">

<p>p      </p>

</div>

CSS: 

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法:Pオブジェクトの上下に2つずつ空のdivオブジェクトCSSコード:.1またはDIVにborderプロパティを追加します.
あなたのNETプログラムは多言語対応
ASP.NETによるワンポイント登録(SSO)は、さまざまな場合に適しています