CSS ブラウザ互換性の問題セット

CSS とブラウザの互換性は、テクニックと原則を理解すれば、難しいことではないでしょう。IE7、6、Fireofx への移行方法をインターネットから集めて整理しました。 Web2.0 では、XHTML 形式でコードを記述してみてください。DOCTYPE は CSS 処理に影響します。W3C 標準として、

CSS スキル
1.p の垂直方向の中央揃えの問題
を追加する必要があります。 vertical-align:middle; 行間隔を p 全体と同じ高さに増やします。 line-height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、改行なしでコンテンツを制御する必要があることです


2. マージンが2倍になる問題
p が float に設定されている場合、IE で設定されているマージンは 2 倍になります。これはie6に存在するバグです。解決策は、この p に display:inline; を追加することです。 例:
対応するCSSは
です #IamFloat{
フロート:左
margin:5px;/*IE では 10px として認識されます*/
display:inline;/*IE では 5px*/} として認識されます


3. float ie によって生成される 2 倍の距離


#box{ float:left; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 //float を無視します。 block 要素と inline という 2 つの要素について詳しく説明します。 block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、およびマージンをすべて制御できることです (ブロック要素)。インライン要素の要素はそれであり、その他の要素は同じ行にあるため制御できません (埋め込み要素)。 #box{ display:block; //インライン要素をブロック要素としてシミュレートできる display:inline; //同じ行に配置する効果を実現
4 IE と幅と高さの問題


IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-height: 35px;}
5.


min-width は非常に便利な CSS コマンドで、要素の最小幅が特定の幅未満にならないように指定できるため、レイアウトが常に正しくなります。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、

タグの下に

を配置し、p にクラスを指定して、次のように CSS を設計します。 #container{ min-width: 600px; width:expression(document.body.clientWidth 最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用するため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。
6.p フローティング IE テキストにより 3 ピクセルのバグが発生します


左側のオブジェクトはフローティングされ、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは、左から 3 ピクセルの間隔で配置されます。 #box{ フロート:左; 幅:800ピクセル;}
#left{ フロート:左幅:50%;}
#right{ 幅:50%;}
*html #left{ margin-right:-3px; //この文が重要です}

7. IE かくれんぼの問題


pアプリケーションが複雑な場合、各列にいくつかのリンクがあり、このときかくれんぼの問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。解決策: #layout の line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。


8.float の p クロージャー;


①例: NOTfloatC ここでは翻訳を続行したくないが、翻訳を続けたいと考えています。下の行。 (floatA と floatB の属性は float:left; に設定されています)
このコードは IE では正常に動作しますが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。 の間に を追加します。例外が発生します。そして、clear スタイルを次のように定義します: .clear{ clear:both;}

② 外部ラッパー p として、高さを自動的に調整できるようにするために、オーバーフローを追加します。フロート ボックスが含まれる場合、自動高さ調整は IE では無効です。レイアウトのプライベート属性 (邪悪な IE!) は、zoom:1; を使用して実行できるため、互換性が実現されます。
たとえば、ラッパーは次のように定義されます:
.colwrapper{ オーバーフロー:非表示; マージン:5px 自動;} ③植字の場合、最もよく使用する CSS 記述はおそらく float:left です。列 n の float p の後ろに統一された背景を作成する必要がある場合があります。例:
。

たとえば、ページの背景を青に設定して、3 つの列すべての背景色を青にしたいとします。ただし、左中央右が下に伸びるにつれて、ページの高さは実際には同じになることがわかります。その理由は、ページが float 属性ではなく、ページを中央に配置する必要があるため、float に設定できないためです。そのため、次のように解決する必要があります

次に、フロートを左に埋め込み、幅を 100% p にして問題を解決します

④ユニバーサルフロートの閉鎖（非常に重要です！）
float をクリアする原理については、「構造マークアップを使用せずに Float をクリアする方法」を参照してください。 Global CSS に次のコードを追加し、close する必要がある p に class="clearfix" を追加します。 /* 明確な修正 */
.clearfix:after { コンテンツ: "."; クリア: 両方;
.clearfix { ディスプレイ:インラインブロック }
/* IE Mac から非表示にする */
.clearfix {ディスプレイ:ブロック;}
/* IE Mac からの非表示を終了 */
/* Clearfix の終わり */
または、次のように設定します: .hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示します

以上がCSS ブラウザ互換性の問題セットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。