CSSのFirefoxとIEでの相違と解決策
1.Divセンター問題
divはmargin-leftを設定して、margin-rightはautoの時すでに中央になって、IEはだめで、IEはbody中央を設定する必要があって、まず親級要素でtext-algin:centerを定義します;これは、親要素内のコンテンツが中央にあることを意味します.
2.リンク(aラベル)の枠線と背景
aリンクに枠線と背景色を付けるには、display:blockを設定し、float:leftを設定して改行しないことを保証します.menubarを参照して、aとmenubarに高さを設定するのは、底辺にずれが表示されないようにするためで、heightを設定しないとmenubarにスペースを挿入できます.
3.ハイパーリンクアクセス後にhoverスタイルが発生しない問題
クリックされてアクセスされたハイパーリンクのスタイルはhoverとactiveを持っていないので、多くの人がこの問題に遭遇したことがあるはずです.解決策はCSS属性の配列順序を変えることです.L-V-H-A
4.カーソル指cursor
cursor:pointerは同時にIE FFにカーソル指状を表示でき、handはIEのみ
5.ULのpaddingとmargin
ulタグはFFではデフォルトでpadding値があり、IEではmarginのみデフォルトで値があるので、ul{margin:0;padding:0;ほとんどの問題を解決できます
6.FORMタグ
このラベルはIEの中で、自動的にいくつかのマージンをmarginして、FFの中でmarginは0で、そのため、一致を表示したいならば、cssの中でmarginとpaddingを指定するほうがいいです.上の2つの問題に対して、私のcssの中で普通はまずこのようなスタイルulを使って、formmargin:0;padding:0;}定義が死んだので、後で頭が痛くない.
7.BOXモデル解釈不一致問題
FFとIEにおけるBOXモデルの解釈が一致しないことによる位相差2 px解決テクニック:div{margin:30 px!important;margin:28 px;}注意この2つのmarginの順序は必ず逆に書くことができなくて、importantこの属性IEは識別することができなくて、しかし他のブラウザは識別することができます.だからIEの下で実はこのように解釈します:
8.属性セレクタ(これは互換性とは言えず、cssを隠すバグ)
これはIE 6に対して.0とIE 6.0以下のバージョンはすべて非表示で、FFとOPeraの作用.属性セレクタとサブセレクタには違いがあり、サブセレクタの範囲は形式的に縮小する、属性セレクタの範囲はp[id]のように大きく、すべてのpラベルにidがあるのは同じ式である.
9.最も残酷な手段-!important
もし本当に細かい問題を解決できないなら、このテクニックを使ってもいいです.FF対!important"は自動的に優先的に解析するが、IEは無視する.次のように
注目すべきは、必ずxxxxを!importantという文は別の文の上に置いてあります.
10.IE,FFのデフォルト値の問題
なぜIEとFFのために異なるCSSを書くのか、なぜIEが頭を悩ませているのか、cssを書きながらその憎らしいM$IEをののしっているのか、と愚痴をこぼしているのかもしれません.実はcssの標準サポートでは、IEは私たちが想像していたほど憎くありません.肝心なのはIEとFFのデフォルト値が異なることです.このテクニックを身につけると、FFとIEを兼ね備えたcssを書くのはそんなに難しくないことに気づきます.簡単なcssに対して、君は全然いらないよ.important」というものです.
ブラウザはWebページを表示するときに、Webページのcssスタイルシートに基づいてどのように表示するかを決定することはよく知られていますが、スタイルシートでは必ずしもすべての要素を具体的に説明する必要はありません.もちろん、そうする必要はありません.そのため、描写されていない属性については、ブラウザはデフォルトの方法を内蔵して表示します.例えば、文字、cssで色を指定していない場合は、ブラウザは黒またはシステム色で表示され、divまたは他の要素の背景がcssで指定されていない場合、ブラウザは白または透明に設定されます.など、他の未定義のスタイルはすべて同じです.だからFFとIEの表示が違う根本的な原因は、それらのデフォルト表示が違うことにありますが、このデフォルトスタイルはどのように表示すればいいのかw 3に対応する基準があるかどうかを知って規定しているので、この点についてもIEを責めないでください.
11.なぜFF下のテキストが容器の高さを広げられないのか
標準ブラウザで高さ値を固定している容器はIE 6のように開けられませんが、私は高さを固定したいし、開けられるようにするにはどうすればいいのでしょうか.方法はheight設定min-height:200 pxを取り除くことです.ここではmin-heightを知らないIE 6に配慮するために、以下のように定義することができる.
12.FireFoxで連続する長さフィールドを自動的に改行する方法
IEでword-wrap:break-wordをそのまま使うのはよく知られていますが、FFではJS挿入を使います
のテクニックで解決
13.なぜIE 6の下の容器の幅とFF解釈が違うのか
問題の違いは、容器全体の幅にボーダーの幅が含まれているかどうかであり、ここでIE 6は200 PX、FFは220 PXと解釈されているが、それはいったいどのようにして問題になっているのだろうか.容器上部のxmlを外すと元の問題が発生していることがわかります.上部の申明はIEのqurks modeをトリガーしています.qurks mode、standards modeに関する知識は、関連資料を参照してください.
IE6,IE7,FF
IE7.0が出てきて、CSSのサポートにまた新しい問題があります.ブラウザが多くなって、ネットBpx;/*For IE7 & IE6*/
_height:20px;/*For IE6*/
順序に注意する.
これもCSS HACKですが、上ほど簡潔ではありません.
2つ目は、IE専用を使用した条件コメントです
第三に、css filterの方法は、以下が経典で海外のウェブサイトから翻訳されたものです.の
新しいcssスタイルは次のとおりです.
divを新規作成し、前に定義したcssのスタイルを使用します.
body表現にlang属性を加え、中国語でzh:
div要素のスタイルをもう1つ定義します.
このようにするのは使うためです!importantは、langセレクタie 7のため、元のcssスタイルを上書きする.0はサポートしていないので、この言葉には何の役にも立たず、ie 6にも達した.0では同じ効果が得られますが、残念ながらsafariではこの属性はサポートされていませんので、以下のcssスタイルを追加する必要があります.
:emptyセレクタはcss 3の仕様です.safariではサポートされていませんが、このエレメントが存在するかどうかにかかわらず、緑色がieの各バージョン以外のブラウザで現在選択されています.
IE 6とFFの互換性は以前のものを考えることができます!important個人は第1種を使うのが好きで、簡潔で、互換性が比較的に良いです
divはmargin-leftを設定して、margin-rightはautoの時すでに中央になって、IEはだめで、IEはbody中央を設定する必要があって、まず親級要素でtext-algin:centerを定義します;これは、親要素内のコンテンツが中央にあることを意味します.
2.リンク(aラベル)の枠線と背景
aリンクに枠線と背景色を付けるには、display:blockを設定し、float:leftを設定して改行しないことを保証します.menubarを参照して、aとmenubarに高さを設定するのは、底辺にずれが表示されないようにするためで、heightを設定しないとmenubarにスペースを挿入できます.
3.ハイパーリンクアクセス後にhoverスタイルが発生しない問題
クリックされてアクセスされたハイパーリンクのスタイルはhoverとactiveを持っていないので、多くの人がこの問題に遭遇したことがあるはずです.解決策はCSS属性の配列順序を変えることです.L-V-H-A
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
4.カーソル指cursor
cursor:pointerは同時にIE FFにカーソル指状を表示でき、handはIEのみ
5.ULのpaddingとmargin
ulタグはFFではデフォルトでpadding値があり、IEではmarginのみデフォルトで値があるので、ul{margin:0;padding:0;ほとんどの問題を解決できます
6.FORMタグ
このラベルはIEの中で、自動的にいくつかのマージンをmarginして、FFの中でmarginは0で、そのため、一致を表示したいならば、cssの中でmarginとpaddingを指定するほうがいいです.上の2つの問題に対して、私のcssの中で普通はまずこのようなスタイルulを使って、formmargin:0;padding:0;}定義が死んだので、後で頭が痛くない.
7.BOXモデル解釈不一致問題
FFとIEにおけるBOXモデルの解釈が一致しないことによる位相差2 px解決テクニック:div{margin:30 px!important;margin:28 px;}注意この2つのmarginの順序は必ず逆に書くことができなくて、importantこの属性IEは識別することができなくて、しかし他のブラウザは識別することができます.だからIEの下で実はこのように解釈します:
div{maring:30px;margin:28px} ， margin:xx px!important;#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.属性セレクタ(これは互換性とは言えず、cssを隠すバグ)
p[id]{}div[id]{}
これはIE 6に対して.0とIE 6.0以下のバージョンはすべて非表示で、FFとOPeraの作用.属性セレクタとサブセレクタには違いがあり、サブセレクタの範囲は形式的に縮小する、属性セレクタの範囲はp[id]のように大きく、すべてのpラベルにidがあるのは同じ式である.
9.最も残酷な手段-!important
もし本当に細かい問題を解決できないなら、このテクニックを使ってもいいです.FF対!important"は自動的に優先的に解析するが、IEは無視する.次のように
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
注目すべきは、必ずxxxxを!importantという文は別の文の上に置いてあります.
10.IE,FFのデフォルト値の問題
なぜIEとFFのために異なるCSSを書くのか、なぜIEが頭を悩ませているのか、cssを書きながらその憎らしいM$IEをののしっているのか、と愚痴をこぼしているのかもしれません.実はcssの標準サポートでは、IEは私たちが想像していたほど憎くありません.肝心なのはIEとFFのデフォルト値が異なることです.このテクニックを身につけると、FFとIEを兼ね備えたcssを書くのはそんなに難しくないことに気づきます.簡単なcssに対して、君は全然いらないよ.important」というものです.
ブラウザはWebページを表示するときに、Webページのcssスタイルシートに基づいてどのように表示するかを決定することはよく知られていますが、スタイルシートでは必ずしもすべての要素を具体的に説明する必要はありません.もちろん、そうする必要はありません.そのため、描写されていない属性については、ブラウザはデフォルトの方法を内蔵して表示します.例えば、文字、cssで色を指定していない場合は、ブラウザは黒またはシステム色で表示され、divまたは他の要素の背景がcssで指定されていない場合、ブラウザは白または透明に設定されます.など、他の未定義のスタイルはすべて同じです.だからFFとIEの表示が違う根本的な原因は、それらのデフォルト表示が違うことにありますが、このデフォルトスタイルはどのように表示すればいいのかw 3に対応する基準があるかどうかを知って規定しているので、この点についてもIEを責めないでください.
11.なぜFF下のテキストが容器の高さを広げられないのか
標準ブラウザで高さ値を固定している容器はIE 6のように開けられませんが、私は高さを固定したいし、開けられるようにするにはどうすればいいのでしょうか.方法はheight設定min-height:200 pxを取り除くことです.ここではmin-heightを知らないIE 6に配慮するために、以下のように定義することができる.
{
height:auto!important;
height:200px;
min-height:200px;
}
12.FireFoxで連続する長さフィールドを自動的に改行する方法
IEでword-wrap:break-wordをそのまま使うのはよく知られていますが、FFではJS挿入を使います
のテクニックで解決
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</scrīpt>
13.なぜIE 6の下の容器の幅とFF解釈が違うのか
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
</style>
<div ōnclick="alert(this.offsetWidth)"> FireFox IE </div>
問題の違いは、容器全体の幅にボーダーの幅が含まれているかどうかであり、ここでIE 6は200 PX、FFは220 PXと解釈されているが、それはいったいどのようにして問題になっているのだろうか.容器上部のxmlを外すと元の問題が発生していることがわかります.上部の申明はIEのqurks modeをトリガーしています.qurks mode、standards modeに関する知識は、関連資料を参照してください.
IE6,IE7,FF
IE7.0が出てきて、CSSのサポートにまた新しい問題があります.ブラウザが多くなって、ネットBpx;/*For IE7 & IE6*/
_height:20px;/*For IE6*/
順序に注意する.
これもCSS HACKですが、上ほど簡潔ではありません.
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
2つ目は、IE専用を使用した条件コメントです
<!-- -->
<link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]>
<!-- IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]--><!--[if lte IE 6]>
<!-- IE6 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->第三に、css filterの方法は、以下が経典で海外のウェブサイトから翻訳されたものです.の
新しいcssスタイルは次のとおりです.
#item {
width: 200px;
height: 200px;
background: red;
}divを新規作成し、前に定義したcssのスタイルを使用します.
<div id="item">some text here</div>
body表現にlang属性を加え、中国語でzh:
<body lang="en">div要素のスタイルをもう1つ定義します.
*:lang(en) #item{
background:green !important;
}このようにするのは使うためです!importantは、langセレクタie 7のため、元のcssスタイルを上書きする.0はサポートしていないので、この言葉には何の役にも立たず、ie 6にも達した.0では同じ効果が得られますが、残念ながらsafariではこの属性はサポートされていませんので、以下のcssスタイルを追加する必要があります.
#item:empty {
background: green !important
}:emptyセレクタはcss 3の仕様です.safariではサポートされていませんが、このエレメントが存在するかどうかにかかわらず、緑色がieの各バージョン以外のブラウザで現在選択されています.
IE 6とFFの互換性は以前のものを考えることができます!important個人は第1種を使うのが好きで、簡潔で、互換性が比較的に良いです