ZT: DIV 設計時の IE6、IE7、および FF の互換性関連機能 CSS_html/css_WEB-ITnose

Web サイトをデザインするときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に DIV CSS を使用してデザインされた Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。ネットワークが混乱している可能性があるので、外出時に影響を及ぼしたくない場合があります。
すべてのブラウザに共通の高さ: 100px;
IE6 固有の高さ: 100px;
現在、次の 2 つの方法でほぼすべての互換性の問題を解決できます (あまり推奨されていません。1 つを使用してください)。
IE7 の ! important サポートにより、 ! important メソッドは IE6 とのみ互換性があります。(書き方に注意してください。宣言位置を事前に指定する必要があることに注意してください。)
コード:

注:
*+html IE7 との互換性を確保するには、HTML の先頭に次のステートメントが必要です:
コード:

2. Universal float クロージャー (非常に重要!) これを使用すると、不正な問題を解決できます。複数のdivを整列させたときの間隔を調整する
floatをクリアする原理については、[構造的マークアップを使わずにfloatをクリアする方法]を参照してください
グローバルCSSに以下のコードを追加し、配置したいdivにclass="clearfix"を追加します閉じられています。
コード:


3. その他の互換性に関するヒント (非常に便利)
1. FF で div にパディングを設定すると幅と高さが増加しますが、IE では増加しません。 !重要)
2、中央揃えの問題。
1) line-height を現在の div と同じ高さに設定し、vetical-align: middle を渡します (コンテンツを折り返さないように注意してください)。
2). margin: 0 auto; (もちろん万能薬ではありません)
3. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります。ナビゲーションタグ)
4. FFとIEのBOXの理解の違いにより2pxの差が生じ、一部の設定がfloatに設定される IEではdivのマージンが2重になるなどの問題
5. ulタグにはlist-styleとpaddingがある。不要なトラブルを避けるために、事前に宣言するのが最善です (ナビゲーションタグとコンテンツリストに共通)
6, 外部ラッパーとして、div は固定の高さを持たないことが最善です。 : 高さの適応性を実現するために非表示になります。
7、ハンド カーソルについて: ポインタ。コードを貼り付けます。
互換性のあるコード: 最も推奨されるモードと互換性があります。
/* FF */
.submitbutton {
float: left;
height: 57px;
margin-top: 24px;
margin-right: 12px;
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px; }
異なるブラウザを使用する場合 (Firefox IE7 IE6)同じ Web サイトやページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあるため、この問題は解決しましたが、別のブラウザーで新たな問題が発生しました。ブラウザ。互換性は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に作成できるようにする方法です。今では調和が生まれています。ふふ！
Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ作成者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 の互換性を使用する必要があります。友人にIE7の互換性はどうなっているのかと聞かれましたが、実は分かりません。 IE7 に特化した互換性はまだ見つかりません。前回の記事に加えて、「CSS Style for Firefox IE6 IE7」の互換性方法も非常に便利です。
少し論理的思考ができる人なら、IE と FF の互換性を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの互換性オプションがあります: (初心者に適しています。笑、専門家はここで終了します。)
プログラム コード
最初のものは互換性があります、IE FF はすべてのブラウザに共通です (実際には互換性はありません)
height:100px
2 つ目は IE6 のみと互換性があります
_height:100px;
3 つ目は IE6 および IE7 と互換性があります
*height:100px;
これら 3 つの互換性を導入したので、次は、IE6 と IE7 の FF 固有の互換性を定義する方法を見てみましょう。次のコードは正しい順序である必要があります:
プログラム コード
height:120px;
_height:150px;
各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。最初の 2. FF は 3 つの属性を認識しないため、height:100px を読み取ります。
IE7 では、3 番目の属性は認識されないため、1 番目と 2 番目の属性を読み取り、2 番目の属性が One 属性をカバーするため、したがって、IE7 が最終的に読み取るのは 2 番目の属性 *height:120px; です。 IE6 では、IE6 は 3 つの属性をすべて認識するため、3 つの属性をすべて読み取ることができ、3 番目の属性は前の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。 。
Firefox ie6 ie7 用の 1 つの CSS スタイル
現在、ほとんどの CSS スタイルは ! important と互換性があります。ie6 および Firefox のテストでは正常に表示できますが、ie7 では ! important を正しく解釈できるため、ページが必要に応じて表示されません。 ！ 「*+html」を使用すると、IE7 と互換性のある方法が見つかりました。次のように CSS を記述します。
#1 { color: #333; /
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/

すると、Firefox ではフォントの色が #333 として表示されます。 IE6ではフォントカラーは#666、IE7ではフォントカラーは#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;」を追加することです
この方法を使用してページ全体を中央に配置したい場合は、使用しないことをお勧めします。 DIV では、複数の div を順番に分割できます。分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。
ボックス モデルの 3 つの異なる解釈
#box{
width:600px;
//ie6.0 の場合
}
#box{
width:600px! important
//ff の場合
width:600px;
//ff+ie6.0 の場合
width /**/:500px;
//ie6.0- の場合
}
4 浮動小数点 ie によって生成される 2 倍の距離 #box { float:left; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 //float を無視します。
2 つの要素について詳しく説明します。 Block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、余白をすべて制御できることです (ブロック要素)。 line を他の要素と同様に制御することはできません (inline Embedded element);
#box{ display:block; //同じように配置された効果を実現します。 row

iplay:table;

5 IE と幅と高さ 問題
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さは変化しません。 IEではすべて設定されています。たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

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

を配置し、その div のクラスを指定します。
その後、CSS は次のように設計されます:
#container{
min -width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
2 行目の幅は Javascript のみを使用します。これを認識できるのは IE だけなので、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。
7 オブジェクト)、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの疑似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていないため、IE/WIN ブラウザーには影響しません。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。