css+div_html/css_WEB-ITnoseの互換方法

IE6とFFの違い：background:orange;

FF、IE7、IE6の違い：background:orange;*background:green ! important;*background:blue;

IE7、IE8互換：<meta http-equiv ="X-UA-Practical" content="IE= EmulateIE7" />

HEAD

1. CSS のいくつかのブラウザは、ブラウザの互換性のために繰り返し定義できる異なるキーワードをサポートしています FireFox と IE7 で認識できます。 * IE6 と IE7 で認識可能_ はい IE6 で認識*+ IE7 で認識

2. IE 固有の条件付きコメント<!--その他のブラウザ--<link <rel="stylesheet" type="text/css; " href="css. css" /> <!--[IE 7 の場合]> <!-- IE7 に適しています --> <link rel="stylesheet" type="text/css" href="ie7.css " /> <![endif]--> <!-- IE6 以下に適しています --> 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: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-topleft:4px; -radius-topright:4px; -moz-border-radius -bottomleft:4px; -moz-border-radius-bottomright:4px;

10. CSS 二重線バンプボーダー: IE: border:2px outset; moz-border-top-colors: #d4d0c8 ホワイト; -moz -border-left-colors: #d4d0c8 ホワイト; -moz-border-right-colors:#404040 -moz-border-bottom-colors:#404040; #808080;

11. IE は CSS メソッド Cursor:url () をサポートします。 カーソル スタイル ファイルとスクロール バーの色のスタイルをカスタマイズします。 FireFox は上記 2 つをサポートしません

12. IE には Select コントロールが常にオンになるバグがあります。 top、およびすべての CSS は Select コントロールでは機能しません

13. IE は、画像やテキスト コンテンツを含むフォームのラベル タグをサポートします。FireFox は、画像を含むラベルをサポートしません。画像をクリックしても、Radio または CheckBox ラベルが表示されません。エフェクトをかけるため

14. FireFox の TextArea は onScroll イベントをサポートしていません

15 . FireFox は表示のインラインとブロックをサポートしていません

16. FireFox が Div に対して margin-left と margin-right を auto に設定すると、すでに中央揃えになっていますが、IEでは動作しません

17. FireFoxがBodyにtext-alignを設定する場合、Divはmarginを設定する必要があります：auto（主にmargin-left margin-right）を中央揃えにすることができます

18. です。ハイパーリンクの CSS スタイル設定の順序は、L-V-H-A に従うのが最善です。つまり、 <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} -->回避可能 訪問後の一部のハイパーリンクにはホバー スタイルとアクティブ スタイルがなくなりました

19. IE で長い段落の自動行折り返しを設定するには、CSS で word-wrap:break-word を設定し、これを実現するには、FireFox で JS 挿入メソッドを使用します。具体的なコードは以下の通りです： <script type="text/javascript"> /* <![CDATA[ */ function toBreakWord(el, intLen){ v​​ar obj=document.getElementById(el); obj.innerHTML; var strTemp =""; while(strContent.length>intLen){ strTemp+=strContent.substr(intLen,strContent.length); "+strContent; obj. innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("div_id", 37); /* ]]> */ </script>

20. 追加後サブコンテナーにフローティング属性を追加すると、コンテナーは自動的に開くことができなくなります。 解決策: ラベルの終了後の次のラベルに CSS

を追加します。解決策: display:inline を追加します

22. IE6では画像の下に隙間がある 解決策：imgにdisplay:blockを追加するか、vertical-align属性をvertical-align:topbottom|middle|text-bottomに設定する

23. 2つのレイヤーの間IE6 でギャップがある場合の解決策: 右の div も float に設定するか、IE6 に対して margin-right:-3px を定義します

24. LI のコンテンツが length<style タイプを超えた後に省略記号を表示する方法="text/css "<!-- li { width:200px; text-overflow:ellipsis; } --> ;/style> (IE のみに適用)

25. 要素の高さと行の高さを同じ値に設定し、テキストを垂直方向に中央揃えにします<style type="text/css"<!-- div { height:30px; line-height:30px; } --> <!-- … …vertical-align:middle; 27. WEB標準をサポートするブラウザは、固定の高さの値を設定すると、IE6 のように拡張されますが、固定の高さを設定したい場合は、IE6 と互換性を持たせるために、height 属性を削除し、min-height を設定します。 min-height はサポートされていないため、次のように定義できます: { height:auto! important; min-height:200px; }

28. IE は Web 標準でスクロール バーの色を設定できません。 CSS の本文の設定を <style type="text/css"<! #eeeeee; スクロールバー-3dlight-color:#eeeeee; スクロールバー-トラックカラー:#fff; } -->

29. IE6 はデフォルトの行高さの問題により、高さ約 1px のコンテナを定義できません: overflow:hidden | line-height:1px などの CSS コンテナ設定で。 Flash に透明属性を追加すると、レイヤーが Flash の上に表示されるようになります。それに応じて、Width 属性と Height 属性の値が増加し、IE が動作しなくなります。 !重要なメソッドを使用して、追加の高さと幅のセットを定義します

32. FireFox は div 間のスペースを無視しますが、IE はそれを処理します。そのため、接続された 2 つの div の間にスペースや改行を入れないようにしてください。有名な 3px のずれなど、異なるブラウザ間では正しくない場合があり、その理由を見つけるのは困難です

33. フォーマットは次のとおりです。 ; </div> </div> コンテンツが多い場合、親が高さを 100% または自動に設定しても、完全に自動的に拡大することはできません。レイヤーの下部に高さ 1 のスペースを生成するコードは次のとおりです。<div id="parent"> <div> 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