JAVASCRIPT IE と FF_javascript スキル間の互換性の問題の概要

png 透過 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

有効: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true: デフォルト値。フィルターが有効になりました。 false: フィルターは無効になります。
sizingMethod: オプション。弦。フィルタリングされたオブジェクトの画像がオブジェクト コンテナの境界内にどのように表示されるかを設定または取得します。トリミング: オブジェクトのサイズに合わせて画像をトリミングします。画像: デフォルト値。画像の寸法に合わせてオブジェクトのサイズ境界を増減します。スケール: オブジェクトのサイズ境界内に収まるように画像をスケールします。
ソース: 必須。弦。絶対または相対 URL アドレスを使用して背景画像を指定します。このパラメータを省略した場合、フィルタは効果がありません。

firefox は innerText をサポートできません
firefox は innerHTML をサポートしますが、innerText を実装するために textContent をサポートしますが、余分なスペースもデフォルトで保持されます。 textContent が使用されない場合、文字列に HTML コードが含まれていない場合は、代わりに innerHTML を使用できます。

Web コンテンツの選択を禁止します
通常、IE では js を使用します: obj.onselectstart=function(){return false;}
Firefox は CSS を使用します:-moz-user -select:none

フィルターのサポート (例: 透明度フィルター)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10 ;

イベントのキャプチャ
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);

マウス位置を取得します
IE:event.clientX,event.clientY
firefox:イベント関数はイベント オブジェクト
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV などを渡す必要があります要素 境界線の問題
例: div の CSS の設定: {width:100px;height:100px;border:#000000 1px Solid;}
IE の場合: div の幅 (ボーダー幅): 100px、div の高さ (ボーダー幅を含む): 100px;
および Firefox: div の幅 (ボーダー幅を含む): 102px、div の高さ (ボーダー幅を含む) ): 102px;

判定ブラウザの種類
var isIE=document.all ? true : false;
document.all 構文がサポートされている場合は、変数を書きましたisIE=true、それ以外の場合は isIE=false

異なるブラウザでの CSS 処理
通常、! important を使用して CSS ステートメントの使用を優先できます (Firefox でのみサポート)
例: {border-width:0px! important;border-width: 1px;}
この要素には Firefox では境界線がありませんが、IE

ドキュメントでは境界線の幅が 1px です。 formName.item("itemName") 問題
問題 注: IE では document.formName.item("itemName") または document.formName.elements ["elementName"] を使用できます。 document.formName.elements["elementName"] のみを使用できます。
解決策: document.formName.elements["elementName"] を一律に使用します。

コレクション オブジェクトの問題
問題の説明: IE では () または [] を使用してコレクション オブジェクトを取得できますが、Firefox では [] を使用してのみコレクションを取得できます。オブジェクト。
解決策: コレクション オブジェクトを取得するには [] を一律に使用します。

カスタム属性の問題
問題の説明: IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得することも、getAttribute() を使用してカスタム属性を取得することもできます。 Firefox この状況では、カスタム属性を取得するには getAttribute() のみを使用できます。
解決策: getAttribute() を通じてカスタム属性を取得します。

eval("idName") の問題
問題の説明: IE では、eval("idName") または getElementById("idName") を使用して ID を持つ HTML を取得できます。 idName オブジェクト。Firefox では、idName の ID を持つ HTML オブジェクトを取得するには getElementById("idName") のみを使用できます。
解決策: getElementById("idName") を一律に使用して、idName の ID を持つ HTML オブジェクトを取得します。

変数名が HTML オブジェクトの ID と同じである問題
問題の説明: IE では、HTML オブジェクトの ID を直接従属として使用できます。ドキュメントのオブジェクト変数名ですが、Firefox では使用できません。Firefox では、HTML オブジェクト ID と同じ変数名を使用できますが、IE では使用できません。
解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、同じ HTML オブジェクト ID を持つ変数名を使用しないことをお勧めします。変数を宣言するときは、あいまいさを避けるために常に var キーワードを追加してください。

const の問題
問題の説明: Firefox では const キーワードまたは var キーワードを使用して定数を定義できますが、IE では var キーワードのみを使用して定数を定義できます。 。
解決策: var キーワードを一律に使用して定数を定義します。

Input.type 属性の問題
問題の説明: IE の input.type 属性は読み取り専用ですが、Firefox の input.type 属性は読み書き可能です。
解決策: input.type 属性を変更しないでください。変更する必要がある場合は、最初に元の入力を非表示にしてから、同じ位置に新しい入力要素を挿入します。

window.event の問題
問題の説明: window.event は IE でのみ実行できますが、Firefox では実行できません。これは、Firefox のイベントがイベントの発生時にのみ実行できるためです。現場で使用します。
解決策: イベントが発生する関数にイベント パラメーターを追加し、関数本体で var myEvent = evt?evt:(window.event?window.event:null)
例を使用します (仮パラメーターを想定)は evt) ：
<script><BR>function doSomething(evt) {<BR>var myEvent = evt ? evt: (window.event ? window.event : null)<BR>…<BR> }<br><br><STRONG>event.x およびevent.y の問題<BR>問題の説明: IE では偶数オブジェクトに x 属性と y 属性がありますが、Firefox では pageX および pageY 属性がありません。偶数オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。 <BR>解決策: var myX =event.x ?event.x :event.pageX;var myY =event.y ?event.y:event.pageY;<BR>質問 8 を検討する場合は、代わりに myEvent を使用してください。 。 <br><br><STRONG>event.srcElement の問題<BR>問題の説明: IE では、even オブジェクトには srcElement 属性がありますが、target 属性がありません。Firefox では、even オブジェクトには target 属性がありますが、 srcElement 属性がありません。 <BR>解決策: srcObj =event.srcElement ?event.srcElement :event.target;<BR>質問 8 を考慮する場合は、event の代わりに myEvent を使用してください。 <br><br><STRONG>window.location.href の問題<BR>問題の説明: IE または Firefox2.0.x では、window.location または window.location.href を使用できます。 x この条件では、window.location のみが使用できます。 <BR>解決策: window.location.href の代わりに window.location を使用します。もちろん、 location.replace() メソッドの使用を検討することもできます。 <br><br><STRONG>モーダル ウィンドウと非モーダル ウィンドウの問題<BR>問題の説明: IE では、モーダル ウィンドウと非モーダル ウィンドウは、Firefox では showModalDialog および showModelessDialog を通じて開くことができます。 。 <BR>解決策: window.open(pageURL,name,parameters) を直接使用して、新しいウィンドウを開きます。 <BR>子ウィンドウのパラメータを親ウィンドウに渡す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。親ウィンドウで子ウィンドウを制御する必要がある場合は、var subWindow = window.open(pageURL,name,parameters); を使用して、新しく開かれたウィンドウ オブジェクトを取得します。 <br><br><STRONG>フレームと iframe の問題<BR>次のフレームを例に挙げます: <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) フレーム オブジェクトにアクセスします<BR>IE: ウィンドウを使用します.frameId または window.frameName を使用して、このフレーム オブジェクトにアクセスします。<BR>Firefox: window.frameName を使用して、このフレーム オブジェクトにアクセスします。<BR>解決策: このフレーム オブジェクトにアクセスするには、一律に window.document.getElementById("frameId") を使用します。 <br><br>(2) フレームコンテンツの切り替え<BR>IE と Firefox の両方で、window.document.getElementById("frameId").src = "xxx.html" または window.frameName.location = " を使用できます。 xxx.html" を使用してフレームのコンテンツを切り替えます。<BR> フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、フレーム内のparentキーワードを使用して親ウィンドウにアクセスできます。 <br><br><STRONG>body 読み込みの問題<BR>問題の説明: Firefox の body オブジェクトはブラウザによって body タグが完全に読み取られる前に存在しますが、IE の body オブジェクトは body タグ内に存在する必要があります。ブラウザが完全に読み込むまで。 <BR>[注意]この問題はまだ検証されていないため、検証後に修正されます。 <BR>[注意] IE6、Opera9、FireFox2 では上記の問題が発生しないことが確認されており、単純な JS スクリプトは、要素が読み込まれていない場合でも、スクリプトより先に読み込まれたすべてのオブジェクトと要素にアクセスできます。まだ。 <br><br><STRONG>イベント委任メソッド<BR>問題の説明: IE では、関数 inject() が以前に実装されていた document.body.onload = inject; を使用します。 .onload = inject();<BR>解決策: document.body.onload=new Function("inject()"); または document.body.onload = function(){/* コードは次のとおりです */}<BR>[注意] Function と function の違い<br><br><STRONG>アクセスする親要素の違い<BR>問題の説明: IE では、obj.parentElement または obj.parentNode を使用して親にアクセスしますobj のノード; Firefox では、obj.parentNode を使用して obj の親ノードにアクセスします。 <BR>解決策: Firefox と IE は両方とも DOM をサポートしているため、obj.parentNode は obj の親ノードにアクセスするために一律に使用されます。<br><br><STRONG>cursor:hand VS cursor:pointer<BR>Problem description: Firefox does not support hand, but IE supports pointer, both are hand instructions. <BR>Solution: Use pointer uniformly. <br><br><STRONG>Problems with innerText<BR>Problem description: innerText can work normally in IE, but innerText does not work in FireFox. <BR>Workaround: Use textContent instead of innerText in non-IE browsers. <BR>Example: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "my text";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[Note] innerHTML is supported by browsers such as IE and Firefox. Others, such as outerHTML, are only supported by IE. , it is best not to use it. <br><br><STRONG>Object width and height assignment problem<BR>Problem description: Statements similar to obj.style.height = imgObj.height in FireFox are invalid. <BR>Solution: Use obj.style.height = imgObj.height "px" uniformly; The operations of the table tag are different. In IE, the innerHTML assignment of table and tr is not allowed. When using js to add a tr, the appendChild method does not work. <br>Solution: <br>//Append an empty row to the table: <STRONG>var row = otable.insertRow(-1);var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[Note] Since I rarely use JS to directly operate tables, I have never encountered this problem. It is recommended to use JS framework to operate tables, such as JQuery. <BR><BR><BR>Indentation problem of ul and ol lists<BR><BR>When eliminating the indentation of ul, ol and other lists, the style should be written as: list-style:none;margin:0px;padding:0px ;<br>The margin attribute is valid for IE, and the padding attribute is valid for FireFox. ← This sentence is incorrectly stated. For details, please see ↓<br>[Note] This issue has not been actually verified and will be modified after verification. <STRONG>[Note] It has been verified that in IE, setting margin:0px can remove the upper, lower, left and right indents, blanks, and list numbers or dots of the list. Setting padding has no effect on the style; in Firefox, setting margin:0px only You can remove the top and bottom spaces. After setting padding:0px, you can only remove the left and right indents. You must also set list-style:none to remove list numbers or dots. In other words, in IE, only margin:0px can be set to achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect. <BR><BR>CSS transparency issue<BR><BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <br>FF:opacity:0.6. <br>[Note] It is best to write both and put the opacity attribute below. <STRONG><BR>CSS rounded corners problem<BR><BR>IE: versions below ie7 do not support rounded corners. <br>FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius-bottomright:4px;. <br>[Note] The rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery frameset to set rounded corners and leave these complex issues to others.</script>