さまざまなブラウザに対応した技術を実装する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 で動作させるには、