CSS互換IE 6,IE 7,FFのテクニック

#box{ float:left; width:100px; margin:0 0 0 100px; //      IE   200px    display:inline; //     }

2007年11月20日火曜日10:44
一、CSS HACK以下の2つの方法は、現在のすべてのHACKをほぼ解決することができる.
1, !important
IE 7ペアに従って!importantのサポート、!importantメソッドは現在IE 6のHACKのみを対象としている.(書き方に注意.この宣言の位置を事前に覚えておく必要がある.)

<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

 
2,IE 6/IE 77対FireFox
*+htmlと*htmlはIE特有のラベルで、firefoxはしばらくサポートしていません.また*+htmlはIE 7特有のラベルである.

<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed,      */
}
</style>

 
注意:*+html IE 7のHACKに対してHTMLの上部に以下の声明があることを保証しなければならない:http://www.w3.org/TR/html4/loose.dtd ">
二、万能float閉鎖(非常に重要!)
clear floatの原理については、[How To Clear Floats Without Structural Markup]を参照して、以下のコードをGlobal CSSに追加し、閉じる必要があるdivにclass="clearfix"を加えると、しばしば不快になる.

<style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

 
三、その他の互換技術(再度くどい)
1,FFでdivにpaddingを設定とwidthとheightが増加するがIEは増加しない.(利用可能!important解決)2,中心問題.1).垂直中央line-heightを現在のdivと同じ高さに設定しvertical-align:middle.(改行しないように注意)2).水平中央margin: 0 auto;(もちろん万能ではありません)3、aラベル内の内容にスタイルを付けるには、display:blockを設定する必要があります.(ナビゲーションタグによく見られる)4,FFとIEのBOXに対する理解の違いにより2 pxの差が生じるfloatとするdivをieでmargin倍にするなどの問題がある.5,ulタグはFFの下でlist-styleとpaddingがデフォルトである.不要な面倒を避けるために、事前に声明したほうがいい.(ナビゲーションラベルやコンテンツリストによく見られる)6は、外部wrapperのdivとして高さを固定しないでoverflow:hiddenを加えたほうがよい.高さアダプティブ7に達するように、手カーソルについて.cursor: pointer. handはIEにのみ適用される.
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- w\idth: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倍距離
ここで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:80 px;height:35 px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6ページの最小幅
min-widthは非常に便利なCSSコマンドで、要素の最小幅と幅を指定することができ、レイアウトが正しいことを保証することができます.しかし、IEはこれを認識していないが、実際にはwidthを最小幅として使用している.このコマンドをIEでも使用できるようにするには、
9プロパティセレクタ(これは互換性とは言えません.cssを隠すバグです)
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を使用する場合、内層オブジェクトの高さが変化すると、外層の高さが自動的に調整されないことである.例:CSS:#box{background-color:#eee;}#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }解決方法:Pオブジェクトに2個ずつ空のdivオブジェクトCSSコードを追加する:.1{height:0 px;overflow:hidden;またはDIVにborderプロパティを追加します.