DIV+CSS をデザインする際のブラウザ互換性の問題!

ブラウザの互換性とは: 異なるブラウザ (Firefox IE7 IE6) を使用して同じ Web サイトまたはページにアクセスすると、このブラウザでは正常に表示されますが、別のブラウザではシードがおかしくなり、互換性の問題が発生します。 CSS を記述するときに非常にイライラします。このブラウザでは問題を解決しましたが、別のブラウザでは新たな問題が発生しています。わかりました、わかりました、それでは、あなたの非互換性を利用して、それぞれに CSS を書き、それぞれに独自のタスクを実行させます。

1. ! important (機能制限)
IE7 の ! important サポートにより、 ! important メソッドは IE 6 のみと互換性があります (記述に注意してください。宣言位置は事前に行う必要があることに注意してください)。
例:

# example {
width: 100px ! important; /* IE7+FF */
width: 200px; /* IE6 */
}

2 つ目は、CSS HACK 方法 (初心者もご覧いただけます)そのまま通過してください)

最初に知っておくべきことは次のとおりです:

すべてのブラウザに共通の高さ: 100px;
IE7 固有の*+高さ: 100px;
IE6 と IE7 は *height を共有します。 : 100px;
IE7 と FF は高さ: 100px を共有します !重要;

例:

#example { height:100px; } /* FF */

* html #example { height:200px; /

*+html #example { height: 300px; } /* IE7 */

次の方法は比較的簡単です

いくつかの例:

1, IE6 - IE7+FF

#example {

height: 100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
実際には、上記の最初の方法も使用できます
#example {
height:100px ! important; */
height:200px; /* IE6 */
}

2, IE6+IE7 - FF

#example {

height:100px; /* FF */
*height:200px; /
}

3、IE6+ FF - IE7

#example {

height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4、IE6 IE7 FF異なる

#example {

height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
または:
#example {
height: 100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

コードの順序を逆にしないでください。無駄になります。ブラウザがプログラムを解釈するとき、名前が同じ場合、変数に値を代入するのと同じように、前の名前を後の名前で上書きするため、一般的なものを前に置き、より専門的なものを後ろに置きます。

コード4の説明:

コードを読むと、最初の行の高さ: 100px; IE6 IE7 FFはすべて100pxで表示されます

2行目になると、*height: 300px; ではありません。この属性は認識されますが、IE6 と IE7 は認識するため、FF は依然として 100px を表示しますが、IE6 と IE7 は 1 行目で取得した height 属性を上書きし、両方とも 300px を表示します
3 行目になると、IE6 のみ _height:200px; IE6はそれを認識するので、2行目で取得した高さを上書きし、最終的に200pxで表示します
このように、3つのブラウザはそれぞれ独自の高さ属性を持っているので、それぞれいじってみましょう

それでも分からない場合は、どちらかを押してくださいでも、あなたがそうする方が良いです。

ああ、言い忘れるところでした:

*+html IE7 との互換性では、HTML の先頭に次のステートメントが必ず必要です:

3. IE 固有の条件付きコメントを使用する

CSS を 3 セットコンパイルする必要があるようですが、最初に貼り付けてから、

IE の if 条件ハックについて説明します。

1. IE 以外をすべて認識します
2. を認識できます
5. 〈!--[if gt IE 5.0]〉 IE5.0 および IE5.0 以降は 〈![endif] --> を認識できます
6. 〈!--[if IE 6]〉 〈![endif]--〉 を認識できるのは IE6 だけです
7. 〈!--[if lt IE 6]〉 IE6 以下のバージョンは〈 ![endif]-〉 を認識できます->
8. 〈!--[if gte IE 6]〉 IE6 以降は 〈![endif]--〉 を認識できます
9. 〈!--[if IE 7]〉 は IE7 のみ認識できます 〈![endif] ]-->
10. を認識できます
11. を認識できます。 注: gt = Great then より大きい
> = > より大きい 符号
lt = Less then より小さい
gte = Great then or Equal than or等しい
lte = Less then or Equal 以下

4. CSS フィルターの方法 (作者によると、古典的な海外の Web サイトから翻訳したものです)

次のように新しい CSS スタイルを作成します。 #it​​em {

width: 200px;

height: 200px;

background: red;

以前に定義した CSS スタイルを使用します:

ここにテキストを入れます

body 式のここに lang 属性を追加します。中国語は zh:

次に、p 要素の別のスタイルを定義します:

*:lang(en) #item{

background:green ! important;

}

これは、元の CSS スタイルを ! important で上書きするために行われます。 :lang セレクターは ie7.0 ではサポートされていないため、この文には影響しません。 ie6.0 にも同じ効果が得られますが、残念ながら Safari もこの属性をサポートしていないため、次の CSS スタイルを追加する必要があります:

#item:empty {

background: green ! important

:empty selector is CSS3 仕様に従って、Safari はこの仕様をサポートしていませんが、この要素が存在するかどうかに関係なく、この要素は引き続き選択され、IE バージョン以外のブラウザーでは緑色が表示されるようになります。

5. FLOAT クローズ (フロートのクリア)

一部のブラウザでは、Web ページがずれて表示されます。これは、実際のクローズではなくフロートを使用していることが原因であることがよくあります。これも、p が高さに適応できない理由の 1 つです。 。親 p が float に設定されていないが、その子 p が float に設定されている場合、親 p は子 DIV 全体をラップできません。この状況は通常、親 DIV に複数の子 DIV が含まれている場合に発生します。解決策:

1. float を親 DIV に設定します (ナンセンスであることはわかっていますので、叱らないでください)

2. すべての子 DIV の後に空の DIV を追加します (推奨されません。ブラウザによっては空の DIV ギャップの結果が表示される場合があります)

例:

.parent{width:100px;}

.son1{float:left;width:20px;}

.son2{float:left;width:80px;}
.clear{clear:both; :0;parding0;height:0px;font-size:0px;}

3. ユニバーサル float クロージャ

次のコードをグローバル CSS に追加し、必要な p に class="clearfix" を追加します。以上、繰り返し動作します

コード:

:after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの擬似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていません。 , そのため、IE /WIN ブラウザには影響しません。これが一番面倒です。

4. overflow:auto (これを見たばかりです。強くお勧めします)

親 DIV の CSS に overflow:auto を追加するだけで完了です。

例:

.parent{width:100px;overflow:auto}

.son1{float:left;width:20px;}

.son2{float:left;width:80px;}

著者の原文: 原理的には、周辺要素がうまく拡張できない原因はオーバーフローである、なぜならオーバーフローは目に見えないからである(W3Cの説明を参照)。さて、周辺要素に「overflow:auto」を追加すれば、結果的にはIE以外は本当に解決できることになります。次のステップは、IE の問題を解決することです。「_height:1%」を追加すると、問題は完全に解決されます。

試してみましたが、実際には「_height:1%」を付けなくてもIEで動作するのでそのままで大丈夫です。

6. 注意が必要な互換性の詳細

1. FF で p のパディングを設定すると、幅と高さが増加します (DIV の実際の幅 = DIV 幅 + パディング) が、IE では増加しません。 : DIV は IE と FF の 2 つの幅を設定し、IE の幅の前に IE 固有のマーク「*」を追加します。

2. ページの中央揃えの問題。IE では

body {TEXT-ALIGN: center;} で十分ですが、FF では失敗します。

解決策: 「MARGIN-RIGHT: auto; MARGIN-LEFT: auto;」を追加します

3. IE6 では時々奇妙なギャップが見られることがありますが、高さは明確に設定されています。

解決策: ギャップのある DIV に「font-size:0px;」を追加してみてください。ハンド カーソル: ポインタは、IE6 Double で生成されたものにのみ適用されます。 distance

#box{ float:left;

width:100px;

margin:0 0 0 100px

}

この場合、IE6 は 200px の距離を生成します

解決策: 表示を追加し、フローティングを無視します

ここでは、block と inline の 2 つの要素について詳しく説明します。 Block 要素の特徴は次のとおりです。常に新しい行で始まり、高さ、幅、行の高さ、および余白をすべて制御できます。インライン要素の特徴は次のとおりです: 他の要素と同じ行にある...制御不可能 (インライン要素)
#box{ //インライン要素をブロック要素としてシミュレートできます。 //同じ配置を実現します。 line

6 の効果 ページの最小幅

min-width は、レイアウトを確保するために、要素の最小幅を特定の幅以下にすることができないことを指定できる非常に便利な CSS コマンドです。は常に正しいです。しかし、IE は min- の定義を認識しませんが、実際には通常の幅と高さをあたかも min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。たとえば、背景画像を設定する場合は、この幅がより重要になります。

解決策: このコマンドを IE でも使用できるようにするには、

タグの下に

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

その後、CSS は次のように設計されます:

#container{

min -width: 600px;

width:e­xpression(document.body.clientWidth }

最初の min-width は 2 行目の幅が使用されます。 Javascript は IE でのみ認識されるため、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

7. UL タグと FORM タグのパディングとマージン

FF では ul タグにはデフォルトでパディング値がありますが、IE ではマージンのみがデフォルトで値を持ちます。 IE の FORM タグには自動的にある程度のマージンが設定されますが、FF ではマージンは 0 です。

解決策: 最初にこのスタイル ul を CSS で使用し、form{margin:0;padding:0;} 定義が無効になったら成功です。

8、DIV フローティング IE テキストは 3 ピクセルのバグを生成します

次の段落はインターネット上に貼り付けたものです

左側のオブジェクトはフローティングで、右側は位置にパッチされています左マージンの場合、右側のオブジェクトのテキストは左から 3 ピクセル離れた位置になります。 #right{

width:50%; }

*html #left{

margin-right:-3px;

//この文が重要です

}

HTMLコード
〈DIV id=box〉
〈DIV id= left 〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉

上記のコードに関して、私の理解は次のとおりです:

まず、right が wi​​dth 属性を定義している限り、FF It IE では間違いなく 2 行で表示されます
次に、両方の幅がパーセンテージとして定義されている場合、両方が 100% であっても、IE では 1 行で表示されます。したがって、上記のいわゆる「この文がキーです」は、幅が数値として定義されていない限り、追加せずに同じ行にあるだけでまったく役に立ちません。

つまり、上記のコードは、少なくとも FF では、実際にはほとんど役に立ちません。実際、IE または FF では、左の幅のみを定義する限り、右の幅を定義しなくても成功します。ただし、この場合、親 DIV ボックスには実際には 2 つの子 DIV LEFT と RIGHT が含まれません。 . 上記で説明した最初の方法を使用して解決できます。最も簡単な方法は、float:left を RIGHT に追加することです。これは本当に面倒です。


9、省略省略記号

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden; }
これは、長さを超えた後に余分なテキストを自動的に切り取ります。省略記号で終わります。テクノロジーは優れたテクノロジーなので、多くの人がそれをランダムに使用することを好みますが、Firefox はサポートしていないことに注意してください。