マルチブラウザcss互換分析小結
2293 ワード
CSS互換のポイント:
1、DOCTYPEはCSS処理に影響する.
2、FF:divはmargin-leftを設定して、margin-rightはautoの時すでに中央になって、IEはだめです.
3、FF:bodyがtext-alignを設定する場合、divはmargin:auto(主にmargin-left、margin-right)を設定する必要があります.
4、FF:paddingを設定するとdivはheightとwidthを増加するが、IEはできないので、使う必要がある!importantはheightとwidthを1つ多く設定します.
5、FF:サポート!important,IEは無視して、利用できます!importantはFF特別設定スタイルです.
6、divの垂直中央問題:vertical-align:middle;行間隔をDIV全体と同じ高line-height:200 pxに増やします.そしてテキストを挿入すると、垂直に中央になります.欠点は、内容を改行しないようにコントロールすることです.
7、cursor:pointerは同時にIE FFにカーソル指状を表示することができ、handはIEのみ可能である.
8、FF:リンクに枠線と背景色を付け、display:blockを設定し、float:leftを設定して改行しないことを保証する.menubarを参照して、aとmenubarに高さを設定するのは、底辺にずれが表示されないようにするためで、heightを設定しないとmenubarにスペースを挿入できます.
XHTML+CSS互換性ソリューション小集
XHTML+CSSフレームワークを使うメリットは少なくありませんが、確かにいくつかの問題があります.使いこなせないからでも、考えがはっきりしないからでも、まず私が出会った問題を以下に書いて、省のみんなを探しています.
1.mozilla firefoxとIEにおけるBOXモデルの解釈が一致しないことによる位相差2 px解決方法:
注意この2つのmarginの順序は必ず逆を書くことができなくて、阿捷の言い方によると!importantという属性IEは認識できませんが、他のブラウザでは認識できます.だからIEの下で実はこのように解釈します:
繰り返し定義すると最後の1つで実行されるので、margin:XXpxだけは書けません!important;
2.IE 5とIE 6のBOX解釈が一致しないIE 5の下でdiv{width:300 px;margin:10 px 0 10 px;divの幅は300 px−10 px(右充填)−10 px(左充填)の最終divの幅が280 pxであると解釈され、IE 6および他のブラウザでは300 px+10 px(右充填)+10 px(左充填)=320 pxで計算される.この場合、次のように変更できます.
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/何なのかよくわかりませんが、IE 5もfirefoxもサポートされていることしか知りませんが、IE 6はサポートされていません.理解してくれる人がいたら、教えてください.ありがとうございます.:)
3.ulタグはMozillaではデフォルトでpadding値がありますが、IEではmarginのみ値があるので定義します.
ほとんどの問題を解決することができます.
4.スクリプトについてxhtml 1.1ではlanguage属性はサポートされておらず、コードを
<br>それでいいです.
<div class="clearfix">
<span id="art_bot"class="jbTestPos"></span>
</div>
</div>
</div>
</div>
</div>
<!--PCとWAPの適応版-->
<div id="SOHUCS"sid="1176390720941010944"></div>
<script type="text/javascript"src="/views/front/js/chanyan.js">
1、DOCTYPEはCSS処理に影響する.
2、FF:divはmargin-leftを設定して、margin-rightはautoの時すでに中央になって、IEはだめです.
3、FF:bodyがtext-alignを設定する場合、divはmargin:auto(主にmargin-left、margin-right)を設定する必要があります.
4、FF:paddingを設定するとdivはheightとwidthを増加するが、IEはできないので、使う必要がある!importantはheightとwidthを1つ多く設定します.
5、FF:サポート!important,IEは無視して、利用できます!importantはFF特別設定スタイルです.
6、divの垂直中央問題:vertical-align:middle;行間隔をDIV全体と同じ高line-height:200 pxに増やします.そしてテキストを挿入すると、垂直に中央になります.欠点は、内容を改行しないようにコントロールすることです.
7、cursor:pointerは同時にIE FFにカーソル指状を表示することができ、handはIEのみ可能である.
8、FF:リンクに枠線と背景色を付け、display:blockを設定し、float:leftを設定して改行しないことを保証する.menubarを参照して、aとmenubarに高さを設定するのは、底辺にずれが表示されないようにするためで、heightを設定しないとmenubarにスペースを挿入できます.
XHTML+CSS互換性ソリューション小集
XHTML+CSSフレームワークを使うメリットは少なくありませんが、確かにいくつかの問題があります.使いこなせないからでも、考えがはっきりしないからでも、まず私が出会った問題を以下に書いて、省のみんなを探しています.
1.mozilla firefoxとIEにおけるBOXモデルの解釈が一致しないことによる位相差2 px解決方法:
div{margin:30px!important;margin:28px;}
注意この2つのmarginの順序は必ず逆を書くことができなくて、阿捷の言い方によると!importantという属性IEは認識できませんが、他のブラウザでは認識できます.だからIEの下で実はこのように解釈します:
div{maring:30px;margin:28px}
繰り返し定義すると最後の1つで実行されるので、margin:XXpxだけは書けません!important;
2.IE 5とIE 6のBOX解釈が一致しないIE 5の下でdiv{width:300 px;margin:10 px 0 10 px;divの幅は300 px−10 px(右充填)−10 px(左充填)の最終divの幅が280 pxであると解釈され、IE 6および他のブラウザでは300 px+10 px(右充填)+10 px(左充填)=320 pxで計算される.この場合、次のように変更できます.
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/何なのかよくわかりませんが、IE 5もfirefoxもサポートされていることしか知りませんが、IE 6はサポートされていません.理解してくれる人がいたら、教えてください.ありがとうございます.:)
3.ulタグはMozillaではデフォルトでpadding値がありますが、IEではmarginのみ値があるので定義します.
ul{margin:0;padding:0;}
ほとんどの問題を解決することができます.
4.スクリプトについてxhtml 1.1ではlanguage属性はサポートされておらず、コードを
<br>それでいいです.
<div class="clearfix">
<span id="art_bot"class="jbTestPos"></span>
</div>
</div>
</div>
</div>
</div>
<!--PCとWAPの適応版-->
<div id="SOHUCS"sid="1176390720941010944"></div>
<script type="text/javascript"src="/views/front/js/chanyan.js">