マルチブラウザ互換性の問題と解決策のCSS編
5395 ワード
互換性処理のポイント
1、DOCTYPE影響CSS処理
2、FF:paddingを設定するとdivはheightとwidthを増加するが、IEはできないので、使う必要がある!importantはheightとwidthを1つ多く設定します
3、FF:サポート!important,IEは無視して、利用できます!importantはFF特別設定スタイル
4、divの垂直中央問題:vertical-align:middle;行間隔をDIV全体と同じ高line-height:200 pxに増やします.そしてテキストを挿入すると、垂直に中央になります.欠点は内容を改行しないこと
5.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;
ブラウザの違い
1、ulとolリストのインデント問題
ul、olなどのリストのインデントを除去する場合、スタイルはlist-style:noneと書く.margin:0px;padding:0px;ここで、margin属性はIEに対して有効であり、padding属性はFireFoxに対して有効である.
[注]経験証、IEでmargin:0 pxを設定すると、リストの上下左右のインデント、空白、リスト番号または円点を取り除くことができ、paddingを設定するとスタイルに影響しません.Firefoxでは、margin:0 pxを設定すると上下の空白だけが取れるようになり、padding:0 pxを設定すると左右のインデントだけが取れるようになり、リスト番号やドットを除去するにはlist-style:noneを設定する必要があります.つまり、IEではmargin:0 pxを設定するだけで最終的な効果が得られ、Firefoxではmargin:0 px、padding:0 px、list-style:noneの3つを同時に設定しなければ最終的な効果が得られない.
2、CSS透明問題
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).FF:opacity:0.6.[注]両方とも書いて、opacityプロパティを下に置いたほうがいいです.
3、CSSフィレット問題
IE:ie 7以下のバージョンではフィレットはサポートされていません.FF:-moz-border-radius:4 px、または-moz-border-radius-topleft:4 px;moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;.[注]フィレット問題はCSSの定番問題ですが、JQueryフレームセットを使ってフィレットを設定し、これらの複雑な問題を他の人に残して考えることをお勧めします.ただし、jQueryのフィレットには領域全体をサポートするフィレットしか見えず、枠線をサポートするフィレットはありませんが、この枠線のフィレットはいくつかの簡単な手段で実現できますので、次回紹介する機会があります.
4、cursor:hand VS cursor:pointer
質問説明:firefoxはhandをサポートしていませんが、ieはpointerをサポートしており、どちらも手の指示です.解決方法:pointerを統一的に使用します.
5、フォントサイズの定義が違う
フォントサイズsmallの定義が異なり、Firefoxでは13 px、IEでは16 pxと大きく異なる.
解決方法:14 pxなどの指定したフォントサイズを使用します.
並列に並べられた複数の要素(ピクチャまたはリンク)のdivとdivの間には、コード内のスペースとリターンはfirefoxで無視されますが、IEではデフォルトでスペース(約3 px)として表示されます.
6、CSSダブルライン凹凸枠IE:border:2 px outset;FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
ブラウザバグ
1、IEの二重距離バグ
floatに設定したdivはieの下で設定したmarginが倍になります.これはie 6が存在するバグです.
解決策:このdivにdisplay:inlineを加える.
例:
<#div id=”imfloat”>
対応するcssは
以下は参照の内容です.
テキストの表示
クリップボードにコピー
印刷
#IamFloat{
float:left;
margin:5px;/*IEでは10 px*/と理解する
display:inline;/*IE下再理解5 px*/}
#IamFloat{
float:left;
margin:5px;/*IE 10px*/
display:inline;/*IE 5px*/
}CSSに関する問題はあまりにも多く、同じCSS定義の異なるページ基準での表示効果も異なる.1つの発展に合った提案は、ページは標準XHTML標準で作成され、tableの使用が少なく、CSS定義はできるだけ標準DOMに従い、IE、Firefox、Operaなどの主流ブラウザを兼ね備えている.多くの場合、FFとOperaのCSS解釈基準はCSS基準に近いし、規範性もある.
2、IEセレクタースペースBUG今日ブログの段落スタイルに頭文字スタイルを設定したところ、元の1つのスペースでもスタイルが無効になることがわかりました.
次のコードを参照してください.
テキストの表示
クリップボードにコピー
印刷
世界にとって、あなたは一人です.しかし、ある人にとって、あなたは彼の世界全体です.たとえ悲しくても、眉をひそめないでください.あなたは誰があなたの笑顔を好きになるか分からないからです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p> ， ； ， 。 ， ， 。</p>
</body>
</html>このコードは
の頭文字スタイル定義にはIE 6では効果がありません(IE 7ではテストされていません)が、p:first-letterと{font-size:300%}にスペースを追加すると、p:first-letter{font-size:300%}が表示されます.しかし、同じコードは、FireFoxで見ると正常です.道理でp:first-letter{font-size:300%}の書き方は間違いない.では、問題はどこにあるのでしょうか.答えは偽クラスのハイフネーション」-」です.IEにはBUGがあり、偽クラスを処理する際に、偽クラスの名前にハイフンが付いている場合-」と、偽クラスの名前の後ろにスペースが付いていなければなりません.そうしないと、スタイルの定義は無効になります.FFでは、スペースを入れなくても正常に処理できます.