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

1. CSS HACK

現在、ほぼすべての HACK を解決できるのは次の 2 つの方法です。

1、! important

IE7 の ! important サポートにより、! important メソッドは IE6 の HACK のみになりました。ステートメントの位置は事前に指定する必要があることを覚えておいてください。) & lt; style & gt;

#wrapper

{

width: 80px;} & lt;/style! & gt;

2、IE6// FireFox 用

*+html および *html は、Firefox ではまだサポートされていない IE 固有のタグです。

<スタイル>

#wrapper

{

#wrapper { width: 120px; }

*html #wrapper { width: 80px;}

*+html #wrapper { width: 60px;}

}

< ;/style>

注:

*+html 正しい IE7 の HACK では、HTML の先頭に次のステートメントがあることを確認する必要があります:

2. ユニバーサルフロートクロージャ

クリアフロートについて 原理は[構造マークアップなしでフロートをクリアする方法]に記載されています

グローバルCSSに以下のコードを追加し、class="clearfix"を追加します。閉じる必要がある div に追加します。これは繰り返し動作します。

3. その他の互換性に関するヒント

1、FF の下に div のパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要で解決できます)

2、中央揃え。問題です。

1) 行の高さを現在の div と同じ高さに設定し、vertical-align: middle を使用します (コンテンツを折り返さないように注意してください)。

2)。 margin: 0 auto;(もちろん万能ではありません)

3. a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)

4. FF と IE の間の BOX の理解では、IE で float に設定された div のマージンが 2 倍になるなどの問題もあります。不要なトラブルを避けるために、事前に宣言しておくことをお勧めします (ナビゲーションタグとコンテンツリストに共通)

6. div の高さを外部ラッパーとして追加しないでください。目標を達成します。非常に適応性があります。

7、ハンドカーソルについて。ポインタ。そしてハンドは IE にのみ適用されます。

1 Firefox IE6 IE7 用の CSS スタイル

現在、IE6 では、ハッキングに ! important を使用しています。および Firefox テストは正常に表示できます

が、IE7 は ! important を正しく解釈できるため、ページが必要どおりに表示されなくなります。 「*+html」を使用した IE7 用の優れたハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。

次のように CSS を書きます:

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999;フォントの色は、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 ごとに MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけで、複数の div を順番に分割できます。

3 ボックスモデルのさまざまな解釈

#box{ //ie6.0 の場合 - width:500px; //ff+ie6.0 の場合}

#box{ width:600px!重要 // for ff width:600px; //ff+ie6.0 の場合 width:500px; //ie6.0-}

4 浮動小数点によって生成される倍精度の距離 ie

#box{ float:left margin: 0 0 0 100px; //この場合、IE は 200px の距離を生成します。 display:inline; //float を無視します}

ここでは、block 要素と inline という 2 つの要素について詳しく説明します。新しい行の開始、高さ、幅、行の高さ、およびマージンはすべて制御できます (ブロック要素)。 Inline 要素の特徴は次のとおりです。 他の要素と同じ行では... 制御できません。 inline element);

#box { display:block; // インライン要素をブロック要素としてシミュレートできます。 // 同じ行に配置する効果を実現します。

IE は定義を認識しませんmin- の値ですが、実際には通常の幅と高さに変換されます。幅と高さは、最小値があるかのように扱われます。これは大きな問題を引き起こします。幅と高さだけを使用すると、通常のブラウザでは幅と高さが設定されません。すべてIEの下で。

たとえば、背景画像を設定したい場合は、この幅の方が重要です。この問題を解決するには、次のようにします:

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

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
也可以直接写成:
#container{ min-width:600px; *width:600px;}
这样就达到不管IE还是FF都是最小宽度为600PX了

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

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

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。

例：

p对象中的内容

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

#box p {margin-top: 20px; margin-bottom: 20px; 解決策: P の上と下object CSS コード .1{height:0px;overflow:hidden;} を持つ 2 つの空の div オブジェクトを追加するか、DIV に border 属性を追加します。

以下の方法は別の角度からの分析方法です:
Webデザインが好きな友達のためにブラウザのバグ処理方法をまとめました(一部):
1. アスタリスク *
IEは*を認識できますが、FFなどの標準ブラウザでは*は認識されません認識された。
例: p { color: yellow; *color:red;}
同様のものは
+ プラス記号です
IE のみが説明します
p{color:red;
IE6 以下はこのスタイルを無視し、IE7 FF はサポートします。
p{color:red ! important;color: yellow;}
IE7 FF は IE6 では赤色を黄色として表示します
ここで、! important メソッドは上記と同じであることに注意してください。この形式は IE6 以下では無視されます。ウェイトは汎用的に使用できます。
3. 下線を引きます。
IE6 以下のバージョンではこのスタイルが使用され、他のバージョンは無視されます
p{color:red; _color:blue}
4. 注:
p{color:red}; このスタイルは IE6 に適用して表示できます。 IE5 以前では処理されないため、IE5/6 で区別できます
5. @IMPORT:
スタイルをインポートするには、URL に値を引用符で囲みます。 @IMPORT URL("newstyle.css"); この使用法は IE5 および FF 以降のブラウザーでサポートされており、IE4 スタイルの個別の処理を実現します
さらに、別の方法もあります:
@IMPORT URL("noie .css. ") screen;
screen はデバイスの種類を指定するためのオプションであり、screen は画面表示に使用され、print は印刷デバイス表示に使用されます。ただし、IE はこの方法をサポートしておらず、すべての IE ブラウザーは IE とFFとの違い。
6. 属性セレクター: 特定の属性を持つオブジェクトを選択するために使用されます
span[class=left]{color:blue}
span[title]{color:red;}
IE6 はサポートしていませんが、FF Normal では動作します。実際の開発では、IE と FF は別々に処理されることがよくあります:
#content{
color:red;
}
[xmlnx] #content {
color: blue
}
この方法は非常に実用的でよく使われると思います。さらに詳細な手順が必要な場合は、もう一度投稿します。 " "}" "; I voice-Family: Inherit;
Color: Red
}
上記のコードは Voice-Family を使用した後に使用され、次の色: red は IE5.5 のブラウザーでは解析されません。したがって、テキストの色は IE6/7/FF では赤で表示され、IE5.5 以前のブラウザでは青で表示されます。
さらに、音声ファミリーを処理する別の方法もあります:
#content{
。 Voice-Family: "}"
Voice-FAMILY: Inherit;
Color: Blue;
}
このメソッドを使用すると、IE6 以降のバージョンのブラウザと FF ブラウザのテキストが赤色になります。ブラウザが青く表示されます!
9. エスケープ属性
p{width:200px;}
IE5.5 未満では無視されます。注: バックスラッシュ文字は、0 ～ 9 または文字 a ～ f
10 の前には使用できません。IE の条件付きコメント
1. 条件付きコメントの概要
IE の条件付きコメントは、IE バージョンと非 IE バージョンで優れています。この区別機能は、一般的に使用されるハックです。 WEBデザインにおける手法。
条件付きコメントは IE5 以降でのみ使用できます。
複数の IE がインストールされている場合、条件付きコメントは IE の最新バージョンに基づきます。
条件付きコメントの基本構造は HTML コメント () と同じです。したがって、IE 以外のブラウザは、これらを通常の
コメントとして扱い、完全に無視します。
IE は、if 条件を使用して、通常のページ コンテンツと同様に、条件付きコメント内のコンテンツを解析するかどうかを決定します。
2. 条件付きコメント属性
gt : より大きい、条件付きバージョンを除く、条件付きバージョンより上のバージョンを選択します
lt : 未満、条件付きバージョンを除く、条件付きバージョンより下のバージョンを選択します
gte : 以上、条件付きバージョンより上のバージョンを選択します 条件付きバージョンを含むバージョン
lte: 以下、条件付きバージョンを含む条件付きバージョンの下のバージョンを選択します
: 高か低かに関係なく、条件付きバージョンを除くすべてのバージョンを選択します
3条件付きコメントの使用方法
コード内の <> に注意してください。英語の「大なり小なり」記号に置き換えてください


IE 5.5 以前で表示
次のコードは、IE 以外のブラウザで実行される条件付きコメントです
Internet Explorer を使用していません
Internet Explorer バージョン 6 または IE 以外のブラウザを使用しています