1.FirefoxはInnertextをサポートできません。
Firefoxはinnerhtmlをサポートしていますが、Innertextをサポートしていません。 Innertextを実装するためにTextContentをサポートしますが、不必要なスペースもデフォルトで保存されます。 TextContentを使用しない場合、文字列にHTMLコードが含まれていない場合は、代わりにInnerHTMLを使用することもできます。
2。Webページのコンテンツを選択することは禁止されています。
IEでは、JSが一般的に使用されます。OBJ.ONSELECTSTART= function(){return false;}
FirefoxはCSSを使用します:-Moz-User-Select:なし
3。フィルターサポート(例:透明フィルター):
IE:フィルター:アルファ(不透明= 10);
Firefox:-moz-opacity:.10;
4。キャプチャイベント:
IE:obj.setcapture()、obj.releasecapture()
firefox:document.addeventlistener( "mousemove"、mousemovefunction、true);
document.RemoveEventListener( "Mousemove"、MousemoveFunction、True);
5。マウスの位置を取得します:
IE:event.clientx、event.clienty
Firefox:イベント関数はイベントオブジェクトを渡す必要があります
obj.onmousemove = function(ev){
x = ev.pagex; y = ev.pagey;
}
6。divなどの要素の境界問題:
たとえば、DivのCSSを設定:: {width:100px; height:100px; border:000000 1px solid;}
IE:divの幅(境界幅を含む):100px、divの高さ(境界幅を含む):100px;
およびFirefox:Divの幅(境界幅を含む):102px、Divの高さ(境界幅を含む):102px;
したがって、IEとFirefoxと互換性のあるこのドラッグウィンドウを実行する場合、脳を使用してJSとCSSを書き、2つのヒントを提供する必要があります
1.ブラウザタイプを決定します。
var isie = document.all? True:false;
document.all syntaxがサポートされている場合、変数を書きました。
2。さまざまなブラウザでのCSS処理:
一般的に、CSSステートメントに優先順位を付けるために重要です(Firefoxによってのみサポートされています)
例:{border-width:0px!fality; border-width:1px;}
Firefoxの下では、この要素には境界線がなく、IEの下では境界幅は1pxです
1.document.formname.item( "itemname")問題
問題の説明:IEでは、document.formname.item( "itemname")またはdocument.formname.elements ["elementname"];を使用できます。 Firefoxでは、document.formname.elements ["elementname"]のみを使用できます。
解決策:document.formname.elements ["elementname"]を統一された方法で使用します。
2。コレクションオブジェクトの問題
問題の説明:IEでは、()または[]を使用してコレクションクラスオブジェクトを取得できます。 Firefoxでは、[]を使用してCollectionクラスオブジェクトを取得できます。
解決策:[]を使用して、統一された方法でコレクションクラスオブジェクトを取得します。
3。カスタム属性の問題
問題の説明:IEでは、通常の属性を取得してカスタム属性を取得する方法を使用するか、getattribute()を使用してカスタム属性を取得できます。 Firefoxでは、getattribute()のみを使用してカスタム属性を取得できます。
回避策:getattribute()を介してカスタム属性を均一に取得します。
4.Eval( "idname")問題
問題の説明:IEでは、eval( "idname")またはgetElementbyid( "idname")を使用して、idnameでHTMLオブジェクトを取得できます。 Firefoxでは、getElementById( "IDNAME")のみを使用して、IDNameを使用してHTMLオブジェクトを取得できます。
解決策:getElementByID( "IDNAME")を使用して、IDNAMEとしてIDを使用してHTMLオブジェクトを取得します。
5。HTMLオブジェクトIDと同じ変数名の問題
問題の説明:IEでは、HTMLオブジェクトのIDは、ドキュメントの下位オブジェクトの変数名として直接使用できますが、Firefoxでは使用できません。 Firefoxでは、HTMLオブジェクトIDと同じ変数名を使用できますが、IEでは使用できません。
回避策:document.idnameの代わりにdocument.getElementByID( "idname")を使用します。エラーを減らすために同じHTMLオブジェクトIDを使用して変数名を取得しないことが最善です。変数を宣言するときは、曖昧さを避けるためにVARキーワードを追加します。
6.CONSTの問題
問題の説明:Firefoxでは、constキーワードまたはvarキーワードを使用して定数を定義できます。 IEでは、VARキーワードを使用して定数を定義できます。
解決策:VARキーワードを使用して、定数を均一に定義します。
7。input.Type属性の問題
問題の説明:IEに基づく入力.Typeプロパティは読み取り専用です。ただし、Firefoxの下のinput.typeプロパティは読み取りされています。
解決策:input.typeプロパティを変更しないでください。変更する必要がある場合は、最初に元の入力を非表示にしてから、同じ位置に新しい入力要素を挿入できます。
8.Window.Event問題
問題の説明:window.eventは、FirefoxではなくIEでのみ実行できます。Firefoxイベントは、イベントが発生するシーンでのみ使用できるためです。
解決策:イベントが発生する関数にイベントパラメーターを追加し、var myevent = evt?evt :( window.event?window.event:nullを使用します)
例:
コードコピーは次のとおりです。
<input type = "button" onclick = "dosomething(event)"/>
<スクリプト言語= "javascript">
function dosomathe(evt){
var myevent = evt?evt :( window.event?window.event:null)
...
}
9。Event.xおよびevent.yの問題
問題の説明:IEの下では、均一なオブジェクトにはxおよびy属性がありますが、pagexおよびpagey属性はありません。 Firefoxの下では、均一なオブジェクトにはpagexとpagey属性がありますが、xおよびy属性はありません。
解決策:var myx = event.x? event.x:event.pagex; var myy = event.y? event.Y:event.pagey;
8番目の号を検討する場合は、イベントの代わりにMyEventを使用してください。
10.Event.Srcelementの問題
問題の説明:IEの下では、均等なオブジェクトにはsrcelementプロパティがありますが、ターゲットプロパティはありません。 Firefoxの下では、均一なオブジェクトにはターゲットプロパティがありますが、srcelementプロパティはありません。
解決策:srcobj = event.srcelementを使用しますか? event.srcelement:event.target;
8番目の号を検討する場合は、イベントの代わりにMyEventを使用してください。
11.window.location.href問題
問題の説明:IEまたはfirefox2.0.xでは、window.locationまたはwindow.location.hrefを使用できます。 firefox1.5.xでは、window.locationのみを使用できます。
回避策:window.location.hrefの代わりにwindow.locationを使用します。もちろん、location.replace()メソッドの使用を検討することもできます。
12。モーダルおよび非モーダルのウィンドウの問題
問題の説明:IEでは、showmodaldialogおよびshowmodelessdialogを介してモーダルウィンドウと非モーダルウィンドウを開くことができます。 Firefoxの下では、できません。
解決策:window.open(pageurl、name、parameters)を使用して、新しいウィンドウを開きます。
子ウィンドウのパラメーターを親ウィンドウに戻す必要がある場合は、window.openerを使用して親ウィンドウにアクセスできます。親ウィンドウがチャイルドウィンドウを制御する必要がある場合は、var subwindow = window.open(pageurl、name、パラメーター)を使用します。新しく開かれたウィンドウオブジェクトを取得します。
13.フレームおよびIFRAMEの問題
次のフレームは例です。
<frame src = "xxx.html" id = "frameid" name = "framename" />
(1)アクセスフレームオブジェクト
IE:window.frameidまたはwindow.framenameを使用して、このフレームオブジェクトにアクセスします。
Firefox:Window.FramEnameを使用して、このフレームオブジェクトにアクセスします。
解決策:window.document.getelementbyid( "frameid")を使用して、このフレームオブジェクトにアクセスします。
(2)スイッチフレームコンテンツ
IEとFirefoxの両方で、window.document.getelementbyid( "frameid")。src= "xxx.html"またはwindow.framename.location = "xxx.html"を使用して、フレームのコンテンツを切り替えることができます。
フレーム内のパラメーターを親ウィンドウに戻す必要がある場合は、フレームの親キーワードを使用して親ウィンドウにアクセスできます。
14。ボディローディングの問題
問題の説明:Firefoxのボディオブジェクトは、ボディタグがブラウザによって完全に読み取られる前に存在します。 IEのボディオブジェクトは、ボディタグがブラウザによって完全に読み込まれた後に存在する必要があります。
[注]この問題はまだ実際に検証されておらず、検証後に変更されます。
[注]上記の問題はIE6、Opera9、およびFirefox2に存在しないことが証明されています。単純なJSスクリプトは、この要素がまだロードされていない場合でも、スクリプトの前にロードされたすべてのオブジェクトと要素にアクセスできます。
15。イベント委任方法
問題の説明:IEで、document.body.onload = injectを使用します。この前に関数inject()が実装されています。 firefoxで、document.body.onload = inject()を使用します。
解決策:document.body.onload = new function( 'inject()')を使用します。またはdocument.body.onload = function(){/* code*/}は次のとおりです。
[注]関数と関数の違い
16。アクセスされた親要素間の違い
問題の説明:IEでは、obj.parentelementまたはobj.parentnodeを使用して、objの親ノードにアクセスします。 Firefoxの下で、obj.parentnodeを使用してOBJの親ノードにアクセスします。
解決策:FirefoxとIEの両方がDOMをサポートするため、OBJ.ParentNodeはOBJの親ノードにアクセスするために使用されます。
17.Cursor:ハンド対カーソル:ポインター
問題の説明:Firefoxは手をサポートしていませんが、IEはポインターをサポートします。どちらも手型の指標です。
解決策:ポインターを統一された方法で使用します。
18. Innertextの問題。
問題の説明:InerTextはIEで適切に機能しますが、InnerTextはFirefoxでは機能しません。
回避策:非IEブラウザでInnertextの代わりにTextContentを使用します。
例:
コードコピーは次のとおりです。
if(navigator.appname.indexof( "explorer")> -1){
document.getElementById( 'element')。innertext = "my text";
} それ以外{
document.getElementById( 'element')。textContent = "my text";
}
[注] InnerHtmlは、IEやFirefoxなどのブラウザによってサポートされています。 Outerhtmlなどの他のものはIEによってのみサポートされているため、使用しないことが最善です。
19。オブジェクトの幅と高さの割り当ての問題
問題の説明:obj.style.height = imgobj.height in firefoxに似たステートメントは無効です。
解決策:obj.style.height = imgobj.height + 'px'をユニフォームで使用します。
20。テーブル操作の問題
問題の説明:IE、Firefox、およびその他のブラウザは、テーブルタグの操作が異なります。 IEでは、innerhtmlをテーブルとtrに割り当てることは許可されていません。 JSを使用する場合、AppendChildメソッドを使用しても機能しません。
解決:
コードコピーは次のとおりです。
//テーブルに空白行を追加します:
var row = otable.insertrow(-1);
var cell = document.createelement( "td");
cell.innerhtml = "";
cell.classname = "xxxx";
row.AppendChild(Cell);
[注] JSを使用してテーブルを直接操作することはめったにないため、この問題に遭遇したことはありません。 JS Frameworkセットを使用して、JQueryなどのテーブルを操作することをお勧めします。
21. ULおよびOLリストインデントの発行
UL、OLなどのリストのインデントを排除する場合、スタイルは次のように書く必要があります。リストスタイル:なし;マージン:0px;パディング:0px;
マージン属性はIEで有効であり、パディング属性はFirefoxに対して有効です。 ←この文は間違っています。詳細については、↓を参照してください
[注]この問題はまだ実際に検証されておらず、検証後に変更されます。
[注] IEでは、マージンの設定:0PXが左右のインデント、ブランク、リストの番号またはドットをリストの数字またはドットを削除できることが証明されており、パディングの設定はスタイルに影響を与えません。 Firefoxでは、マージンの設定:0pxは上下の空白のみを削除でき、パディングを設定した後:0pxは左と右のインデントのみを削除できます。リストスタイルを設定する必要があります。リスト番号またはドットを削除する必要はありません。言い換えれば、IEでは、マージンを設定するだけで最終効果を達成できます:0px、パディング:0px、リストスタイル:最終効果を達成するためにFirefoxで同時に設定する必要はありません。
22。CSS透明性の問題
IE:フィルター:progid:dmimagetransform.microsoft.alpha(style = 0、ofacity = 60)。
FF:不透明:0.6。
[注]両方を書いて、不透明な属性を以下に配置するのが最善です。
23。CSS丸い角の問題
IE:IE7の次のバージョンは、丸い角をサポートしていません。
ff:-moz-border-radius:4px、または-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;。
[注]丸い角の問題は、CSSの古典的な問題です。 jqueryフレームワークセットを使用して、丸い角を設定して、他の人が考えるようにこれらの複雑な問題を残すことをお勧めします。
CSSについてはあまりにも多くの質問があり、同じCSS定義でさえ、異なるページ標準で異なる表示効果があります。適切な提案は、ページが標準のDHTML標準で記述されており、テーブルの使用はめったに使用されないことです。 CSSの定義は、可能な限り標準のDOMに基づいている必要があり、IE、Firefox、Operaなどの主流のブラウザも考慮されています。ところで、多くの場合、FFとオペラのCSS解釈基準はCSS基準に近く、より標準化されています。