ブラウザの互換性とは: 異なるブラウザ (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 を共有します !重要;
height: 100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
実際には、上記の最初の方法も使用できます
#example {
height:100px ! important; */
height:200px; /* IE6 */
}
height:100px; /* FF */
*height:200px; /
}
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
または:
#example {
height: 100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
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 固有の条件付きコメントを使用する
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 スタイルを作成します。 #item {
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 が含まれている場合に発生します。解決策:
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;}
次のコードをグローバル CSS に追加し、必要な p に class="clearfix" を追加します。以上、繰り返し動作します
コード:
:after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの擬似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていません。 , そのため、IE /WIN ブラウザには影響しません。これが一番面倒です。
4. 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
解決策: このコマンドを IE でも使用できるようにするには、
を配置し、p のクラスを指定します。
その後、CSS は次のように設計されます:#container{
min -width: 600px;width:expression(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 が width 属性を定義している限り、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 はサポートしていないことに注意してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
