IE、Firefox、Opera のページ表示の類似点と相違点について、スクリプトを書くのは苦痛_JavaScript スキル

1.document.formName.item("itemName") 問題
説明: IE では document.formName.item("itemName") または Firefox では document.formName.elements ["elementName"] を使用できます。
解決策: document.formName.elements["elementName"] を一律に使用します。
2. コレクション クラス オブジェクトの問題
説明: IE では、コレクション オブジェクトを取得するには () または [] を使用できます。Firefox では、コレクション オブジェクトを取得するには [] のみを使用します。
3.
注: IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得することも、getAttribute() を使用してカスタム属性を取得することもできます。Firefox では、getAttribute() を使用してカスタム属性を取得することしかできません。 🎜>解決策: getAttribute() を介してカスタム属性を取得する統合
4.eval("idName") の問題
説明: IE では、eval("idName") または getElementById("idName") を使用して、 ID を idName HTML オブジェクトとして取得します。Firefox では、idName の ID を持つ HTML オブジェクトを取得するには getElementById("idName") のみを使用します。
解決策: HTML オブジェクトを取得するには、一律に getElementById("idName") を使用します。 5. 変数名が HTML オブジェクトの ID と同じである問題
注: IE では、HTML オブジェクトの ID をそのまま変数名として使用できます。 Firefox では、HTML オブジェクトの ID を HTML オブジェクト ID と同じように使用できます。これは、IE では使用できません。
解決策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、変数を宣言するときは常に var を追加してください。
6.const の問題
説明: Firefox では定数の定義に const キーワードまたは var キーワードを使用できますが、IE では定数の定義に var キーワードのみを使用できます。
解決策: var を一律に使用します。
7.Input.type 属性の問題
説明: IE の input.type 属性は読み取り専用ですが、Firefox の input.type 属性は読み取り/書き込み可能です。 .event 問題
説明: window.event は Firefox ではなく IE でのみ実行できます。 これは、Firefox のイベントがイベントが発生するシーンでのみ使用できるためです。
解決策:
IE:


...

IE&Firefox:


...

9.event.x およびevent 。 y の問題
説明: IE では偶数オブジェクトに x、y 属性がありますが、pageX、pageY 属性はありません。Firefox では、偶数オブジェクトに pageX、pageY 属性がありますが、x、y 属性はありません。
解決策: IE の場合は、event.x を、Firefox の場合は、event.pageX を置き換えるには、mX (mX =event.x ?event.x :event.pageX;) を使用してください。
10.event.srcElement の問題
説明: IE では、 Even オブジェクトには srcElement 属性がありますが、target 属性はありません。Firefox では、even オブジェクトには target 属性がありますが、srcElement 属性はありません。
解決策: obj (obj =event.srcElement ?event.srcElement :event) を使用します。 .target;) IE のevent.srcElement または Firefox のevent.target を置き換えるには、
11.window.location.href の問題
説明: IE または Firefox2.0.x では、window.location またはwindow.location .href; Firefox 1.5.x では、window.location のみを使用できます。
解決策: window.location.href の代わりに window.location を使用します。
12. 🎜 >注: IE では、showModalDialog および showModelessDialog を通じてモーダル ウィンドウと非モーダル ウィンドウを開くことができますが、Firefox では開くことができません。
解決策: window.open(pageURL, name,parameters) を直接使用して、新しいウィンドウを開きます。
子ウィンドウのパラメータを親ウィンドウに戻す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。例: var parWin = window.opener.getElementById; ("Aqing"). value = "Aqing";
13.フレームの問題
次のフレームを例に挙げます:


(1) フレーム オブジェクトにアクセスします:
IE: このフレーム オブジェクトにアクセスするには window.frameId または window .frameName を使用します。Firefox: このフレーム オブジェクトにアクセスするには window.frameName のみを使用できます。
さらに、window.document.getElementById(" FrameId") を使用すると、IE と Firefox の両方でアクセスできます。このフレーム オブジェクトです。
(2) フレーム コンテンツの切り替え:
window.document.getElementById("testFrame").src = "xxx.html" を使用できます。または、IE と Firefox の両方で window.frameName.location = "xxx.html" を使用してフレームのコンテンツを切り替えます。
フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、frme でparentを使用できます。親ウィンドウにアクセスします。例如：parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：

IE&Firefox：



15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
有人说标准是：
document.body.onload=new Function('inject()');



16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';

20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24. CSS圆角
IE：不支持圆角。
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;。
25. CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;