CSS 互換デバッグの一般的な状況と対応する方法

次に

、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 コード

9 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にするバグです)

p[id ]{}div[id]{}

これは IE6.0 用であり、IE6.0 より前のバージョンは非表示になります。FF

と OPera では、サブセレクターの範囲が狭められています。

10 IE かくれんぼの問題

div アプリケーションが複雑な場合、

p In [id] のように、属性セレクターの範囲は比較的大きくなります。

このとき、かくれんぼ問題が発生しやすくなります。

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

11 高さ非適応

高さ非適応とは、特に内層オブジェクトがマージンまたはパディングを使用している場合、内層オブジェクトの高さが変化した場合に、外層の高さを自動的に調整できないことを意味します

。

例:

CSS: #box {background-color:#eee; }

#box p {margin-top: 20px;margin -

、

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 以外のブラウザで実行される条件付きコメントです。
Internet Explorer を使用していません
Internet Explorer バージョン 6 または IE 以外のブラウザを使用しています