1. CSS HACK
現在、ほぼすべての HACK を解決できるのは次の 2 つのメソッドです。
1. ! important
IE7 の ! important サポートにより、! important メソッドは IE 6 の HACK のみに使用できるようになりました (記述に注意してください。宣言位置が必要であることに注意してください)。
<style>
#wrapper
{
width: 100px! important;
width: 80px;
}
</style>
2. FireFox の IE6/IE77
*+html および *html は IE 固有のタグであり、サポートされていません
。
そして *+html IE7 専用のタグです。
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper
{ width: 60px; }
}
</style>
注:
IE7 の *+html HACK では、HTML の先頭に次のステートメントがあることを確認する必要があります:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
2. ユニバーサルフロートクロージャ。
クリアフロートの原理については、[構造マークアップなしでフロートをクリアする方法]を参照してください。
次のコードを
グローバル CSS を作成し、閉じる必要がある div に class="clearfix" を追加します。<style> は
毎回機能します。
.clearfix
:
after
{
コンテンツ
:
".";
クリア
:
両方
;
}
.clearfix {ディスプレイ:ブロック;}
</style>
3. その他の互換性に関するヒント
1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要で解決できます)
2. 中央揃えの問題
1)。 line- 高さを現在の div と同じ高さに設定し、vertical-align: middle に設定します (コンテンツを折り返さないように注意してください)。
2) 水平方向に中央揃えにします。万能ではありません)
3. a タグにコンテンツを追加する必要がある場合、上位のスタイルでは、display: block; を設定する必要があります (ナビゲーション タグで一般的)
4. FF と IE の BOX の理解の違いは 2px につながりますIEでfloatに設定したdivのマージンが2倍になるなどの問題点。
ulタグはデフォルトで以下にリスト形式とパディングがあるので、不要なトラブルを避けるために事前に宣言しておくと良いでしょう。ナビゲーション タグとコンテンツ リストで一般的)
6. div の高さを外部ラッパーとして設定しないでください。高度な適応性を実現するには、overflow: hidden を追加するのが最善です。
7. ハンド カーソル: ポインターについて。 . そして、hand は IE にのみ適用されます。
1. Firefox ie6 および ie7 の CSS スタイルのほとんどは、
ie6 および firefox の表示では正常に動作します
が、ie7 は正しく解釈できます
。ページが必要に応じて表示されなくなります。
「*+html」を使用した IE7用の
優れたハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。次のような CSS を記述します。
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
すると、Firefox ではフォントの色が #333 として表示されます。フォントの色は、IE6 では #666、IE7 では #999 です。
2CSS レイアウトの中央揃え
に関する主なスタイル定義は
次のとおりです:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
説明:
最初に親で TEXT-ALIGN を定義します。 element: center; これは、親要素内のコンテンツが中央に配置されることを意味します。IE ではこの設定で十分です。
ただし、mozilla の中心に置くことはできません。解決策は、子要素を設定するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。
この方法を使用してページ全体を中央に配置したい場合は、設定しないことをお勧めします。 DIV では、複数の div を順番に分割できます。
分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけです。
3 ボックス モデルのさまざまな解釈
#box{ width:600px; //ie6.0 の場合 - width:500px; //ff+ie6.0 の場合}
#box{ width:600px! important //ff の場合: 600px; // ff+ie6.0 の場合 width :500px; // ie6.0 の場合
4 浮動小数点数で生成された距離
#box{ float:left:100px; //これこの状況では、IE は 200px の距離を生成します。 display:inline; //float を無視します。
2 つの要素 block と inline について詳しく説明します。 Block 要素の特徴は次のとおりです: 常に新しい行で開始する、高さ。
、幅、行の高さ、マージンを
制御できます (ブロック要素); インライン要素の特徴は次のとおりです: 他の要素と同じ行上では制御できません (インライン要素)。
/インライン要素にすることができます。 ブロック要素としてシミュレートします。 display:inline; //同じ行に配置する効果を実現します。IE
は min- の定義を認識しませんが、実際には通常の幅と高さを扱います。分があります。これは大きな問題です。
通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします。
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px;}
6ページ 最小幅
min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、
実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、<body> タグの下に <div> を配置し、その div のクラスを指定します。
次に
、CSS を次のように設計します
。:expression (document.body.clientWidth < 600? "600px": "auto" );}
最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用しています。 HTML ドキュメントはあまり形式的ではありません。実際にはJavaScriptの判断により最小幅を実装しています。
次のように直接書くこともできます。
#コンテナ{ min-width:600px; *width:600px;}
この方法では、IE または FF に関係なく、最小幅は 600PX になります。
7 フローティング
.hackbox{ display:table; または .hackbox{ clear:both;} を
クリアするか、追加します。 : after (擬似オブジェクト) は、オブジェクトの後に発生するコンテンツを設定します。通常、IE はこの擬似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていない
ため、IE/WIN ブラウザーには影響しません。これの最も厄介な点は... #box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}
8 DIV フローティング IE テキストは 3 ピクセルを生成しますバグ
の側面はフローティング
であり、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置に配置されます。
left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px; //この文が重要です}
HTML コード<div id="box" > <div id="left"></div> <div id="right"></div></div>
9 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にするバグです)
p[id ]{}div[id]{}
これは IE6.0 用であり、IE6.0 より前のバージョンは非表示になります。FF
と OPera では、サブセレクターの範囲が狭められています。
10 IE かくれんぼの問題
div アプリケーションが複雑な場合、
p In [id] のように、属性セレクターの範囲は比較的大きくなります。
このとき、かくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。
解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。
11 高さ非適応
高さ非適応とは、特に内層オブジェクトがマージンまたはパディングを使用している場合、内層オブジェクトの高さが変化した場合に、外層の高さを自動的に調整できないことを意味します
。
例:
<div id="box">
<p>p オブジェクトのコンテンツ</p>
</div>
CSS: #box {background-color:#eee; }
#box p {margin-top: 20px;margin -
解決策: CSS コード: .1{height:0px;overflow:hidden;} の上下に空の div オブジェクトを追加するか、
DIV に border 属性を追加します。
別の角度からの分析方法としては、次のような方法があります。
Web デザインが好きな友人のためにまとめたブラウザのバグ処理方法 (一部) を共有します。
1. アスタリスク*
IEでは*を認識できますが、FFなどの標準ブラウザでは*を認識できません。
例: p { カラー: イエロー; *カラー: レッド;}
同様のものは、
+ プラス記号
IEのみ説明します
p{色:赤+色:青}
IEは青、FFは赤で表示されます。
2.!重要
IE6 以前ではこのスタイルは無視されますが、IE7 FF ではサポートされます。
p{色:赤!重要;色:黄色;}
IE7 FFでは赤色が表示されます IE6では黄色が表示されます
ここで、! important メソッドは、上記の形式に従った後の IE6 以下でのみ無視されることに注意してください。スタイルの重みを増やす他のメソッドは普遍的に使用できます。
3. 下線を引きます。
IE6 以下のバージョンではこのスタイルが使用され、その他のバージョンは無視されます。
p{色:赤; _色:青}
4. 注:
p{色:赤};
このスタイルは IE6 で適用して表示できますが、IE5 以下のバージョンでは処理されないため、IE5/6 で区別できます。
5.@インポート:
@IMPORT で URL を使用してスタイルをインポートします。標準的な使用法は、次のように URL に値を引用符で囲むことです。この使用法は、IE5 以降のブラウザーと FF でサポートされています。 IE4 のスタイルは個別に処理されます。
さらに、次のような別の方法もあります。
@IMPORT URL("noie.css") 画面;
Screen はデバイスの種類を指定するためのオプションであり、screen は画面表示に使用され、print は印刷デバイス表示に使用されます。ただし、IE はこの方法をサポートしておらず、すべての IE ブラウザーは IE と FF を区別できます。
6. 属性セレクター: 特定の属性を持つオブジェクトを選択するために使用されます。
スパン[クラス=左]{カラー:ブルー}
スパン[タイトル]{色:赤;}
IE6は未対応ですが、FFでは問題なく動作するので、IEとFFを別々に処理することも可能です。
実際の開発では、IE と FF を別々に処理する必要があることがよくあります。次のコードを使用できます。
＃コンテンツ{
色: 赤;
}
[xmlnx] #コンテンツ{
色: ブルー
}
この方法は非常に実用的で頻繁に使用されると思います。さらに詳細な説明が必要な場合は、もう一度投稿します。
7. サブオブジェクトセレクター:
スパン>p{カラー:レッド}
IE6 もサポートされていませんが、IE と FF を区別するためにも使用できます。
8. タンテック法
＃コンテンツ{
色: 青;
音声ファミリー:""}"";
音声ファミリー:継承;
色: 赤;
}
上記のコードで voice-family を使用すると、次の color:red は IE5.5 以前のブラウザでは解析されないため、IE6/7/FF ではテキストの色が赤で表示され、IE5.5 以前ではテキストの色が赤で表示されます。ブラウザ上では青色で表示されます。
さらに、音声ファミリーに対処する別の方法もあります。
＃コンテンツ{
色: 赤;
音声ファミリー:"}"
音声ファミリー:継承;
色: 青;
}
この方法を使うと、IE6以下のブラウザとFFブラウザでは文字が赤く表示され、IE5以下のブラウザでは文字が青く表示されます！
9. エスケープ属性
p{width:200px;}
IE5.5以下は無視されます。注: バックスラッシュ文字は、0 ～ 9 または文字 af の前には使用できません。
10. IE の条件付きコメント 1. 条件付きコメントの概要
IE の条件付きコメントは、IE のバージョンと IE および非 IE を区別する優れた機能を備えており、WEB デザインでよく使用されます。
ハック方法。
条件付きコメントは IE5 以降でのみ使用できます。
複数の IE がインストールされている場合、条件付きコメントは IE の最新バージョンに基づきます。
条件付きコメントの基本構造は HTML コメント (<!– –>) と同じです。したがって、IE 以外のブラウザでは、これらは通常のコメントとして扱われ、完全に無視されます。
IE は、if 条件を使用して、通常のページ コンテンツと同様に、条件付きコメント内のコンテンツを解析するかどうかを決定します。
2. 条件付きアノテーション属性
gt: より大きい、条件付きバージョン以上を選択します (条件付きバージョンを除く)
lt: より小さい、条件付きバージョンを除く、条件付きバージョンの下のバージョンを選択します
gte: 以上、条件付きバージョン以上を選択します (条件付きバージョンを含む)
lte: 以下。条件付きバージョンを含む、条件付きバージョンの下のバージョンを選択します。
! : 条件付きバージョンを除くすべてのバージョンを高低に関係なく選択します。 条件付きコメントの使用方法
コード内の <> を英語の対応する大なり小なり記号に置き換えることに注意してください。
<!--[IE 5の場合]>IE5.5でのみ表示されます<![endif]-->
<!--[if gt IE 5.5]>IE 5.5 以降でのみ表示されます<![endif]-->
<!--[IE 5.5 の場合]>IE 5.5 でのみ表示されます<![endif]-->
<!--[if gte IE 5.5]>IE 5.5 以降で表示されます<![endif]-->
<!--[if ite IE 5.5]>IE 5.5 以前で表示可能<![endif]--><!--[if !IE 5.5]>IE 5.5 以外の IE で表示<![endif]
-->
次のコードは、IE 以外のブラウザで実行される条件付きコメントです。
<!--[if !IE]><!-->Internet Explorer を使用していません<!--<![endif]-->
<!--[IE 6 の場合]><!-->Internet Explorer バージョン 6 または IE 以外のブラウザを使用しています<!--<![endif]-
次に、3 つの包括的な解決策を要約します。
最初のタイプ:
.div {
背景範囲;
*背景:緑!重要;
*background:blue;
}
2 番目のタイプ:
.div {
マージン:10px;
*マージン:15px;
_マージン:15px;
番目
のタイプ:
#div { カラー: #333;
* html #div { カラー: #666 }
*+html #div { カラー: #999;