CSSがIEブラウザとFirefoxブラウザで表示するいくつかの違い

4117 ワード

自分を忘れないように記録します!!
CSSはIEブラウザとFirefoxブラウザに表示されるいくつかの違い:
1、padding、borderの値はIEでは幅を計上せず、Firefoxでは幅を会計する.
2、margin:0 auto; IE 6の下で中央に位置しないのはコードに関係し、ヘッダに次のコードを追加すると中央に位置します.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

3、IEのif条件css hackすべてのIEが認識可能IE 5のみ0は Only IE 5.0+ IE5.0パッケージIE 5.5でも認識できますIE 6のみ認識可能なcssスタイルIE 6およびIE 6以下のIE 5.xはすべてIE 7のみ認識可能以内のcssスタイル特別説明ie 8はif条件を使用してdiv cssスタイルを設定できません.ここで「以上のif条件により、異なるバージョンのブラウザに対して異なるcssスタイルを呼び出すことで、css hackメソッドを解決する.
4、IE 6、IE 7、IE 8、Firefox互換性CSS HACKについて整理する
1.IEと非IEブラウザCSS HACKコードの区別
#divcss5{
background:blue; /* IE */
background:red \9; /*IE6、IE7、IE8 */
}

2.区別IE 6,IE 7,IE 8,FF CSS HACK【区別記号】:「9」、「*」、「」【例】:
 #divcss5{
background:blue; /*Firefox */
background:red \9; /*IE8 */
*background:black; /*IE7 */
_background:orange; /*IE6 */
}

 
【説明】:IEシリーズブラウザでは「9」が読め、IE 6とIE 7では「*」(米番号)が読め、またIE 6では「」が認識できる(ベースライン)なので、順番に書くことができるので、CSSの文法がわかるようにブラウザが正しく読み取れるので、IEの各バージョンと非IEブラウザ(Firefox、Opera、Google Chrome、Safariなど)を有効に区別することができます.
 
3.区別IE 6、IE 7、Firefox(EXP 1)【区別記号】:「*」、「」【例】:
 #divcss5{
background:blue; /*Firefox */
*background:black; /*IE7 */
_background:orange; /*IE6 */
}

【説明】:IE 7とIE 6は「*」(米番号)が読め、IE 6は「_」も読める(ベースライン)だがIE 7は「」を読めず、Firefox(IEブラウザ以外)では「*」と「_」が全く認識されず、従って、このような相違性により、IE 6、IE 7、Firefoxを区別することができる
 
4.区別IE 6、IE 7、Firefox(EXP 2)【区別記号】:「*」、「!important」【例】:
#divcss5{
background:blue; /*Firefox */
*background:green !important; /*IE7 */
*background:orange; /*IE6 */
}

【説明】:IE 7は「*」と「!important」を認識できるが、IE 6は「*」しか認識できないのに「!important」を認識できない.Firefoxは「!important」を読み取ることができるが「*」を認識できないため、このような違いを通じてIE 6、IE 7、Firefoxを効果的に区別することができる.
 
5.区別IE 7、Firefox【区別記号】:「*」、「!important」【例】:
#divcss5{
background:blue; /*Firefox */
*background:green !important; /*IE7 */
}

【説明】:Firefoxは「!important」を認識できるが「*」を認識できないため、IE 7は「*」、「!important」を同時に理解できるため、2つの認識記号でIE 7とFirefoxを区別することができる.
 
6.区別IE 6、IE 7(EXP 1)【区別記号】:「*」、「」【例】:
#tip {
*background:black; /*IE7 */
_background:orange; /*IE6 */
}

【説明】:IE 7もIE 6も「*」(米名)は認識できるが、IE 6は「」は認識できる(ベースライン)、IE 7は認識できず、IE 7を通して「」を読み取ることができません.の特性はIE 6とIE 7の違いを簡単に区別することができる.
 
7.区別IE 6、IE 7(EXP 2)【区別記号】:「!important」【例】:
#divcss5{
background:black !important; /*IE7 */
background:orange; /*IE6 */
}

 
【説明】:IE 7は「!important;」を読み取ることができるのでしかしIE 6はダメで、CSSの読み取りステップは上から下なので、IE 6の読み取り時に「!important」が認識できずそのまま次の行にジャンプしてCSSを読み取るので、背景色はオレンジ色になります.
 
8.区別IE 6、Firefox【区別記号】:「」【例】:
#divcss5{
background:black; /*Firefox */
_background:orange; /*IE6 */
}

 
【説明】:IE 6は「」を認識できるから(ベースライン)だがFirefoxはダメなので、このような違いを通してFirefoxとIE 6を区切ってCSS hackを効果的に達成することができる.
 
以上はIE 6IE 8IE 7火狐ブラウザ互換性の問題と解決方法を含む.