よくある CSS エラーと解決策

IE6 と FF の違い: background:orange;*background:blue;
IE6 と IE7 の違い: background:green !important;background:blue;
IE7 と FF の違い: background:orange; *background:green;
FF、IE7、IE6 の違い: background:orange;*background:green !important;*background:blue;
IE7、IE8 互換: <meta http-equiv="X-UA-compatible" content="IE=EmulateIE7" />
1. CSSは複数のブラウザで異なるキーワードをサポートし、ブラウザの互換性を繰り返し定義できます。importantはFireFoxとIE7で認識できます。*はIE6とIE7で認識できます。_はIE6で認識できます。*+は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]-->
3. 複数のブラウザによる実際のピクセルの解釈 IE/Opera: オブジェクトの実際の幅 = (margin-left) + width + (margin-right) Firefox/Mozilla: オブジェクトの実際の幅 = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)
4. マウス ジェスチャの問題: Firefox のカーソル プロパティは手をサポートしていませんが、ポインターをサポートしています。一方、IE は両方をサポートしています。そのため、互換性のためにポインターが使用されます。
5. FireFoxでHTMLタグのStyle属性を設定する場合、位置、幅、高さ、サイズの値の後ろにはすべてpxを付ける必要があります。IEもこの書き方をサポートしているため、px単位が一律に追加されます。たとえば、Obj.Style.Height = imgObj.Style.Height + 'px';
6. Firefox は、padding 5px 4px 3px 1px などの省略されたパディング プロパティ設定を解析できないため、padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0; に変更する必要があります。
7. ul、ol、その他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります: list-style:none;margin:0px;padding:0px; margin属性はIEで有効で、padding属性はFireFoxで有効です。
8. CSS は透明度を制御します: IE: filter: progid: DXImageTransform.Microsoft.Alpha (style = 0, opacity = 60); FireFox: opacity: 0.6;
9. CSS は丸い角を制御します: IE: 丸い角はサポートされていません。Firefox: -moz-border-radius:4px; または -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;
10. CSS 二重線の凹凸境界線: IE: border: 2px outset; FireFox: -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors: #404040 #808080; -moz-border-bottom-colors: #404040 #808080;
11. IE は、カーソル スタイル ファイルとスクロール バーのカラー スタイルをカスタマイズするための CSS メソッド cursor:url() をサポートしていますが、FireFox は上記のいずれもサポートしていません。
12. IE には、選択コントロールが常に最上位レイヤーにあり、すべての CSS が選択コントロールで機能しないというバグがあります。
13. IE はフォーム内のラベル タグ (画像やテキスト コンテンツを含む) をサポートしますが、Firefox は画像を含むラベルをサポートしません。画像をクリックしても、ラベルが付けられたラジオ ボタンやチェックボックスは有効になりません。14. Firefox の TextArea は onScroll イベントをサポートしません。
15. Firefoxはインライン表示とブロック表示をサポートしていない
16. Div の margin-left と margin-right を auto に設定すると、Firefox では中央揃えになりますが、IE では中央揃えになりません。
17. FirefoxがBodyにtext-alignを設定する場合、Divはmargin: auto（主にmargin-left margin-right）を設定して中央に配置する必要があります。
18. ハイパーリンクの CSS スタイルを設定するときは、次の順序に従うのが最適です: LVHA。つまり、<style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style> これにより、訪問したハイパーリンクの一部にホバースタイルとアクティブスタイルが適用されなくなるのを防ぐことができます。
19. IE で長い段落に自動改行を設定するには、CSS で word-wrap:break-word を設定します。FireFox では、JS 挿入メソッドを使用して実装します。具体的なコードは次のとおりです。 <script type="text/javascript"> /* <![CDATA[ */ function toBreakWord(el, intLen){ v​​ar obj=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("div_id", 37); /* ]]> */ </script>
20. 子コンテナに float 属性を追加した後、コンテナは自動的に拡張されません。解決策: タグが終了した後の次のタグで float をクリアする CSS clear:both を追加します。
21. フローティング後、IE6は外側の余白を実際の余白の2倍として解釈します。解決策: display:inlineを追加します。
22. IE6 では画像の下に隙間ができます。解決方法: img に display:block を追加するか、vertical-align プロパティを vertical-align:top | bottom | middle | text-bottom に設定します。
23. IE6 で 2 つのレイヤーの間にギャップがある問題の解決策: 右の div も float に設定するか、IE6 を基準にして margin-right:-3px を定義します。
24. LI のコンテンツが長さを超えた場合に省略記号を表示する方法 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> (IE にのみ適用)
25. 要素の高さと行の高さを同じ値に設定して、テキストを垂直方向に中央揃えにします <style type="text/css"> <!-- div { height:30px; line-height:30px; } --> </style>
26. テキストをテキスト入力ボックスに合わせて配置するには、CSS に vertical-align:middle; プロパティ設定を追加します。 <style type="text/css"> <!-- … … vertical-align:middle; } --> </style>
27. WEB 標準をサポートするブラウザで固定の高さの値を設定すると、IE6 のように伸縮されません。しかし、固定の高さを設定しつつ伸縮できるようにしたい場合はどうすればよいでしょうか。解決策は、height 属性を削除して min-height を設定することです。min-height をサポートしない IE6 と互換性を持たせるには、次のように定義します: { height:auto!important; height:200px; min-height:200px; }
28. IE でスクロールバーの色を Web 標準で設定できない問題の解決方法: CSS の body の設定を html に変更します <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>
29. IE6 では、デフォルトの行の高さの問題により、高さが約 1px のコンテナーを定義できません。解決策: CSS でコンテナーを次のように設定します: overflow:hidden | zoom:0.08 | line-height:1px
30. Flash の透明度プロパティを設定すると、レイヤーが Flash の上に表示されます。<param name="wmode" value="transparent" /> <!-- IE の問題を解決します //> <embed wmode="transparent" …… > <!-- FireFox の問題を解決します //>
31. FirefoxはPadding属性を設定するとそれに応じてWidthとHeight属性の値を増やしますが、IEはそうしません。解決策：!importantメソッドを使用して、HeightとWidthの追加セットを定義します。
32. Firefox は div 間のスペースを無視しますが、IE は無視します。したがって、2 つの接続された div 間にスペースや改行を入れないようにしてください。そうしないと、有名な 3px 偏差など、異なるブラウザー間で形式が不正確になる可能性があります。その理由を見つけるのは困難です。
33. 次の形式です <div id="parent"> <div id="content"> </div> </div> コンテンツが大きい場合、親が 100% または自動に設定されていても、異なるブラウザーで自動的に拡大することはできません。解決策は、レイヤーの下部に高さ 1 のスペースを作成することです。コードは次のとおりです <div id="parent"> <div id="content"> </div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>
34. IEとFireFoxは小さいフォントサイズの解釈が異なります。FireFoxは13px、IEは16pxです。
35. IEとFireFoxはスペースのサイズを異なる方法で解釈します。FireFoxは4px、IEは8pxです。