さまざまなブラウザに対応した技術を実装するCSSコード_体験交流

css スタイル シートを作成するときに、ブラウザの互換性の問題がよく発生します。たとえば、異なるコアを備えたブラウザでは必ずしも同じ表示が表示されるとは限らず、ブラウザのバージョンが異なると上位互換性と下位互換性の問題も発生する可能性があります。これらの問題を解決する方法css ハック技術をよく知っている人にとっては簡単すぎる問題ですが、よく理解していない人にとっては、非常に悩ましい問題となっています。以下は、zhao lei の公式ブログの記事で、さまざまなブラウザーとの互換性に関するヒントを紹介しています。ただし、ブラウザの表示に誤りがあるからといって、それはブラウザの問題であると考えず、構造が良くない可能性もありますので、意味構造を勉強することをお勧めします。 、最初に鉄筋を構築する必要があります。

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 によって生成される 2 倍の距離 #box{ float:left; width:100px; margin:0 0 0 100px; //この場合、ie は 200px の距離を生成します display:inline; //フローティングを無視します}
ここでは、block の 2 つの要素である inline について説明します。 block 要素の特徴は、 常に改行から始まる、高さ、幅、高さ、境界線を制御できる (ブロック要素)、 の特徴です。 inline 要素は次のとおりです: 他の要素と同じ行にある... 制御できません (inline 要素);
#box{ display:block; //インライン要素をブロック要素としてシミュレートできます display:inline; //実現同じ行 配置の効果 diplay:table; //ff の場合、テーブルの効果をシミュレートします}

7、oprea のみ @media all and (min-width:0px){/* opera */#box {}}
8. ie と幅と高さの問題
ie は min- の定義を認識しませんが、実際には通常の幅と高さをあたかも min があるかのように扱います。これは大きな問題です。width と height だけを使用すると、この 2 つの値は通常のブラウザでは変更されません。min-width と min-height だけを使用すると、幅と高さはまったく設定されませんieの下で。

たとえば、背景画像を設定する場合は、この幅の方が重要です。この問題を解決するには、次のようにします: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
9 ,ページの最小幅
min-width は非常に便利な css コマンドです。植字が常に安定するように、要素の最小幅が特定の幅未満にならないように指定できます。正しい。しかし、ie はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを ie で動作させるには、

タグの下に

を配置し、div のクラスを指定します。

css は次のように設計されます: #container{ min-width: 600px; width:expression(document.body.clientwidth 最初の min-width は通常ですが、2 行目の幅は ie でのみ認識される javascript を使用しているため、html ドキュメントの形式も低くなります。実際にはjavascriptの判断により最小幅を実装しています。​

同じ方法を使用して ie の最大幅を実現することもできます: #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientwidth 1200? "1200px" : "auto";}
10、クリアフロート
.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示} または .hackbox{ clear:both;}
または、オブジェクトの後に発生するコンテンツを設定するには、 after (擬似オブジェクト) を追加します。これは通常、コンテンツと組み合わせて使用​​されます。ie はこの擬似オブジェクトをサポートしておらず、ie ブラウザでもサポートされていないため、 ie/win ブラウザに影響します。 -----これが一番面倒なんですが…。

#box:after{ content: "."; 表示: ブロック; 高さ: 0; クリア: 両方; 可視性: 非表示;}
11. div フローティング ie テキストにより 3 ピクセルのバグが発生する
左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクトのテキストは、左側から 3 ピクセル離れた位置になります。 #box{ float:left; width :800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //この文が鍵です}
html コード

12. 属性セレクター（これは互換性があるとは考えられません。css を非表示にするバグです） p[id]{}div[id]{}
これは ie6.0 および ie6.0 より前のバージョンでは非表示になり、ff および opera で動作します。

属性セレクターとサブセレクターの間にはまだ違いがあります。サブセレクターの範囲は形式的に狭いですが、属性セレクターの範囲は比較的広いです。たとえば、p[id] 、すべての p タグ内 id を持つものはすべて同じスタイルです

上記は、さまざまなブラウザとの互換性を実現する css テクニックのコード_体験交流の内容です。関連コンテンツについては、php 中国語 web サイト (www.php.cn) にご注意ください。