cssは各ブラウザの技巧に対応するコードを実現します。

cssスタイルシートを作成する時、よくブラウザ対応の問題に出会います。異なるカーネルのブラウザ表示と同じではないようです。バージョンによっては上下互換の問題が発生します。どうやってこれらの問題を解決するかが私達の悩みの問題になります。 hackの技術がよく知っているなら、それは簡単すぎますが、よく分からない人にとっては本当に困ったことになります。ここでは 公式ブログ 各ブラウザに対応するテクニックを紹介する記事を募集します。しかし、ブラウザの表示が間違っていると思わないでください。ブラウザの問題も構造がよくないかもしれません。意味構造をよく勉強してください。家を建てるにはまず鉄筋を使うべきです。  1,ボックスの解釈の違い。 

#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-} 

2、ieにcssを隠し、サブセレクタを使用する。 html body #box{ }  3，ieのみの識別 *html #box{ }  4，ie/winで有効で、ie/maxは隠れて、反対のスラッシュを使います。 /* \ */  #box{ }  5，ieに単独でスタイルを定義する ここでもっと詳しく説明します。  6,フロートieによる二倍の距離 #box{ float:left; width:100 px; magin:0 0 0 100 px; //この場合、IEは200 pxの距離を生む。 display:inline; //フロートを無視する         ここでblockとinlineの2つの要素について詳しく説明します。Block要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、辺の距離をコントロールできます。Inline要素の特徴は、他の要素と同じ行にある、制御できないことです。  #box{ display:block; //埋め込み要素のブロック要素としてモデル化できます。 display:inline; //同じ行を並べる効果を実現します。 diplay:テーブル; //for ff，アナログテーブルの効果｝  7,for oprea only @メディア all. and (min-width:0 px){/* opera */#box{ }}  8，IEと幅と高さの問題         IEはmin-という定義を認識していませんが、実際には正常なwidthとheightをminとして使用しています。これで問題が大きくなります。幅と高さだけを使うと、通常のブラウザでこの2つの値は変わりません。ミニwidthとmin-heightだけを使うと、IEの下には幅と高さが設定されていないのに等しいです。  背景画像を設定するには、この幅が重要です。この問題を解決するには、こうしてもいいです。 #box{ width: 80 px; height: 35 px;html body #box{ width: auto; height: auto; ミニ-width: 80 px; min-height: 35 px;  9ページの最小幅         min-widthは非常に便利なCSSコマンドです。元素を指定してもいいし、幅を小さくしてもいいです。そうすると、レイアウトがずっと正しいと保証できます。しかし、IEはこれを認識していません。 widthを最小幅として使う。このコマンドをIEでも使えるようにするために、一つの＜div＞を使ってもいいです。 挿入  ラベルの下で、divのクラスを指定します。  そしてCSSはこのように設計します。 #container{ ミニ-width: 600 px; width:expression(document.body.client Width) < 600ですか "600 px": "atot" );}          最初のミニwidthは正常です。しかし、2行目のwidthはJavascriptを使っています。これはIEでしか認識できません。これもあなたのHTML文書があまり正規ではありません。それは実際にJavascriptの判断によって最小幅を実現します。  同様の方法は、IEの最大幅を達成することもできる。 #container{min-width: 600 px;max-width: 1200 px;width:expression(document.body.client Width) < 600ですか "600 px" : Dcument.body.client Width > 1200ですか ”1200 px" : ”auto";  10,フロートをクリア         .hackbox{ display：テーブル //対象をブロックの要素レベルの表として表示するか、または。 clear:both;  あるいは参加します：after（偽の対象）、対象の後で発生する内容を設定して、通常contentと協力して使って、IEはこの偽りの対象を支持しないで、Ieではありません。 ブラウザはサポートしていますので、IE/WINブラウザに影響はありません。このような一番面倒くさいのは……  #box:after{ content: "."; display: block height: 0; clear: ボス visibility: hidden;  11，DIVフロートIEテキストは3画素のbugを生成する。  左のオブジェクトが浮動し、右のパッチの左の間隔で位置を特定します。右のオブジェクト内のテキストは左の3 pxの間隔になります。 #box{ float:left; width:800 px;left{ float:left; width:50%ナイト{ width:50%html #left{ magin-right:-3 px; //この文が鍵です  HTMLコード   12,プロパティセレクタ(これは互換性とは言えません。cssを隠すバグです。) p[id]{}div[id]{}  これはIE 6.0およびIE 6.0以下のバージョンに対しては非表示です。          属性セレクタとサブセレクタはまだ違いがあります。サブセレクタの範囲は形式的には縮小されています。属性セレクタの範囲はp[id]のように、pタグの中にidがあるものはすべて同じです。