この記事では、多くの例でCSSとJavaScriptの間の互換性の問題をまとめたものです。参照のためにそれを共有してください。特定の要約は次のとおりです。
1。CSSスタイルの互換性
1。フロートクリアリングフロート
一部のブラウザでは、Webページは、フロートが使用されていて実際に閉じられていないため、一部のブラウザでは整列されています。これが、DIVが高さに適応できない理由でもあります。親divがフロートを設定しないが、その子divがフロートを持っている場合、親divは子供div全体をカバーすることはできません。この状況は、一般に、親divに複数の子供divが含まれている場合に発生します。解決：
1）親divにフロートを設定します
2）たとえば、すべてのサブジャブ（これが現在行っていることです）の後に空のdivを追加します。たとえば
parent {width：100px;}。son1 {float：left; width：20px;}。son2 {float：left; width：width：80px;}3）ユニバーサルフロートは閉鎖されました
次のコードをグローバルCSSに追加し、閉じて行われた閉じて行う必要があるdivにclass = "clearfix"を追加します。
<style>/* clear fix*/。clearfix：after {content： "：後（pseudoオブジェクト）、通常はコンテンツと組み合わせて使用されるオブジェクトの後に発生するコンテンツを設定します。 IEはこの擬似オブジェクトをサポートせず、IEブラウザによってサポートされていないため、IE/WINブラウザーには影響しません。これは最も厄介です。
4）オーバーフロー：自動
オーバーフローを追加するだけです：親divのCSSに自動します。例えば：
Parent {width：100px; overflow：auto} .son1 {float：left; width：20px;}。son2 {float：left; width：80px;} <div> <div> </div> </div> </div>原則は、オーバーフローが見えないため、末梢要素を拡張できない理由はオーバーフローにあるということです（W3Cの説明を参照）。ここで、「オーバーフロー：自動」を周辺要素に追加するだけで、その結果、IEを除いて実際に解決できます。次に、IEの問題を解決する必要があります。 「_height：1％」を追加すると、この問題は完全に解決します。試してみましたが、IEの下に「_Height：1％」を追加しても構いません。
2。レキシコンを切断します
.hh {-o-text-overflow：ellipsis; text-overflow：ellipsis; white-face：nowrap; overflow：hidden;}これは、長さを超えた後、余分なテキストが単独で遮断され、楕円で終わることを意味します。テクノロジーは優れたテクノロジーであり、多くの人々はランダムに使用することを好みますが、Firefoxはそれをサポートしていないことに注意してください。
<meta http-equiv = "x-ua-compatible" content = "ie = 7" />
この文をページに追加すると、ページがIE7と互換性がある可能性があります
参照のために！浮かぶ問題について思い出させたいと思います。 Div幅と高さの設定に注意してください。オーバーフローの設定に注意してください：hidden;ディスプレイの閉鎖に注意してください：Firefox Parent Div Stylesのインラインブロック。
3。カーソル：ハンドとカーソル：ポインター
Firefoxは手をサポートしていませんが、IEはポインターをサポートしています
解決策：ポインターを均一に使用します
4。CSS透明
いくつかのブラウザは、さまざまな方法で透明性をサポートしています。 IE、Firefox、Chrome、Safariなどの主流のブラウザに透明性効果を正常に表示できるようにするために、透明性クラスを定義できます。
特定のコードは次のとおりです。
.transparent {filter：alpha（ofacity = 60）; /*サポートIEブラウザ*/-Moz-opacity：0.6; /*Firefoxブラウザのサポート*/不透明：0.6; /*Chrome、Opera、Safari、その他のブラウザをサポート*/}5. CSSの幅とパディング
IE7およびFFでは、幅の幅にはパディングではなく、IE6に含まれます。
2。JavaScriptの互換性
1。子供と子供のnode
IEが提供するFirefoxの下で、子供、子供のnode、子供nodeの行動には違いがあります。 Firefoxの下のChildrenNodeは、親ノードの子供としてのラインブレークとホワイトスペースの両方のキャラクターをカウントしますが、IEの子供たちと子供はそうしません。例えば：
<div id = "dd">
<div> yizhu2000 </div>
</div>
ID DDを備えたDIVは、IEの下で子育てで表示されます。子供の数はFFの下で1と3です。 FirefoxのDom Viewerから、その子供は["/n"、div、 "/n"であることがわかります。
Firefoxの下で子供の特性をシミュレートするために、これを行うことができます。
if（typeof（htmlelement）！= "undefined" &&！window.opera）{htmlelement.prototype .__ definegetter __（ "children"、function（）{for（var a = []、j = 0、n、i = 0; i <this.childnodes.lengte） == {a ++] {n.name] = [] [n.name] = n;2。FirefoxおよびIEイベント
window.eventは、FirefoxではなくIEでのみ使用できます。これは、Firefoxイベントはイベントが発生するシーンでのみ使用できるためです。 Firefoxは、パラメーターの合格のためにソースからイベントを追加する必要があります。 IEはこのパラメーターを無視し、window.eventを使用してイベントを読み取ります。
たとえば、IEの下でマウスの位置を取得するための次の方法：
<button onclick = "onclick（）">マウスクリックの水平座標を取得</button> <スクリプトタイプ= "text/javascript"> function onclick（）{alert（event.clientx）;} </scrip>に変更する必要があります
<button onclick = "onclick（event）"> get outerhtml </button> <script = "text/javascript"> function onclick（event）{event = event || window.event; alert（event.clientx）;} </script>両方のブラウザでのみ使用します
3。HTMLオブジェクトの取得問題
firefox get method document.getElementbyid（ "idname"）
IEはdocument.idnameまたはdocument.getElementById（ "idname"）を使用します
解決策：document.getElementById（ "idname"）;
4。ConstIssue
Firefoxでは、constキーワードまたはvarキーワードを使用して定数を定義できます。
IEでは、VARキーワードを使用して定数を定義できます。
解決策：VARキーワードを使用して、定数を定義します。
5.フレームの問題
次のフレームは例です。
<frame src = "xxx.html" id = "frameid" name = "framename" />
a）アクセスフレームオブジェクト
IE：window.frameidまたはwindow.framenameを使用して、このフレームオブジェクトにアクセスします。frameidとframenameは同じ名前を持つことができます。
Firefox：Window.Framenameのみを使用して、このフレームオブジェクトにアクセスできます。
さらに、IEとFirefoxの両方で、window.document.getelementbyid（ "frameid"）を使用して、このフレームオブジェクトにアクセスできます。
b）フレームコンテンツを切り替えます
IEとFirefoxの両方で、window.document.getelementbyid（ "testframe"）。src= "xxx.html"またはwindow.framename.location = "xxx.html"を使用して、フレームのコンテンツを切り替えることができます。
フレーム内のパラメーターを親ウィンドウに戻す必要がある場合（オープナーではなく親であることに注意してください）、フレームの親を使用して親ウィンドウにアクセスできます。例えば：
parent.document.form1.filename.value = "aqing";
6。身体の問題
Firefoxの体は、ボディタグがブラウザによって完全に読み取られる前に存在します。 IEのボディタグがブラウザによって完全に読み込まれた後、IEのボディは存在する必要があります。
7。FirefoxとIE親要素の違い（ParentElement）
IE：obj.parentelement
Firefox：obj.parentnode
解決策：FirefoxとIEの両方がDOMをサポートするため、すべてobj.parentnodeを使用します
8.インターテキストの問題
InnerTextは通常IEで動作しますが、InnerTextはFirefoxでは機能しません。TextContentが必要です。
解決：
if（navigator.appname.indexof（ "explorer"）> -1）{document.getElementbyId（ 'element'）。innertext = "my text";}9。AJAXの違いはxmlhttpを取得します
var xmlhttp; if（window.xmlhttprequest）{xmlhttp = new xmlhttprequest（）;} elseif（window.activexobject）{// ie取得方法xmlhttp = new activexobject（ "microsoft.xmlhtp"）;}注：IEでは、XMLHTTP.SEND（コンテンツ）メソッドのコンテンツは空になる可能性がありますが、Firefoxはnullできません。送信（ ""）を使用する必要があります。そうしないと、411エラーが発生します。
この記事がすべての人のWebプログラミングに役立つことを願っています。