Summary of compatibility issues between JAVASCRIPT IE and FF_javascript skills

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

enabled: optional . Boolean. Sets or retrieves whether the filter is active. true: default value. Filter activated. false: filter is disabled.
sizingMethod: optional. String. Sets or retrieves how the image of the filtered object is displayed within the boundaries of the object container. crop: Crop the image to fit the object size. image: default value. Increase or decrease the object's size bounds to fit the dimensions of the picture. scale: Scale the image to fit within the object's size boundaries.
src: required. String. Specify the background image using an absolute or relative URL address. If this parameter is omitted, the filter will have no effect.

firefox cannot support innerText
firefox supports innerHTML but not innerText. It supports textContent to implement innerText, but the extra spaces are also retained by default. If textContent is not used, innerHTML can be used instead if the string does not contain HTML code.

Prohibit selection of web content
Generally use js in IE: obj.onselectstart=function(){return false;}
And firefox uses CSS:-moz-user -select:none

Filter support (example: transparency filter)
IE: filter: alpha(opacity=10);
firefox: -moz-opacity :.10;

Capture events
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true );
document.removeEventListener("mousemove",mousemovefunction,true);

Get the mouse position
IE: event.clientX, event.clientY
firefox: The event function needs to pass the event object
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV and other elements Border issues
For example: setting the CSS of a div: {width:100px;height:100px;border:#000000 1px solid;}
In IE: the width of the div (including the border width): 100px , the height of the div (including the border width): 100px;
and firefox: the width of the div (including the border width): 102px, the height of the div (including the border width): 102px;

Judgment Browser type
var isIE=document.all ? true : false;
I wrote a variable, if the document.all syntax is supported then isIE=true, otherwise isIE=false

CSS processing under different browsers
Generally, you can use !important to prioritize the use of css statements (only supported by firefox)
For example: {border-width:0px!important;border-width: 1px;}
This element has no border under Firefox, but the border width is 1px under IE

document.formName.item("itemName") Problem
Problem Note: Under IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName"]; under Firefox, you can only use document.formName.elements["elementName"].
Solution: Use document.formName.elements["elementName"] uniformly.

Problem with collection objects
Problem description: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [] to obtain collection objects.
Solution: Use [] uniformly to obtain collection objects.

Custom attribute problem
Problem description: Under IE, you can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; Firefox Under this circumstance, you can only use getAttribute() to obtain custom attributes.
Solution: Get custom attributes through getAttribute().

eval("idName") problem
Problem description: Under IE, you can use eval("idName") or getElementById("idName") to get the HTML with id idName Object; under Firefox, you can only use getElementById("idName") to obtain the HTML object with the id of idName.
Solution: Use getElementById("idName") uniformly to obtain the HTML object with the id of idName.

The problem that the variable name is the same as the ID of an HTML object
Problem description: Under IE, the ID of the HTML object can be used directly as the subordinate object variable name of document, but it cannot be used under Firefox ;Under Firefox, you can use the same variable name as the HTML object ID, but not under IE.
Solution: Use document.getElementById("idName") instead of document.idName. It is best not to use variable names with the same HTML object ID to reduce errors; when declaring variables, always add the var keyword to avoid ambiguity.

const problem
Problem description: Under Firefox, you can use the const keyword or the var keyword to define constants; under IE, you can only use the var keyword to define constants.
Solution: Use the var keyword uniformly to define constants.

Input.type attribute problem
Problem description: The input.type attribute under IE is read-only; but the input.type attribute under Firefox is read-write.
Solution: Do not modify the input.type attribute. If you must modify it, you can hide the original input first, and then insert a new input element at the same position.

window.event problem
Problem description: window.event can only be run under IE, but not under Firefox. This is because Firefox's event can only be run when an event occurs. for on-site use.
Solution: Add the event parameter to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
Example in the function body (assuming the formal parameter is evt) ：
<script><BR>function doSomething(evt) {<BR>var myEvent = evt ? evt: (window.event ? window.event : null)<BR>…<BR>}<br><br><STRONG>Problems with event.x and event.y<BR>Problem description: Under IE, the even object has x and y attributes, but not pageX and pageY attributes; under Firefox, the even object has pageX, pageY attribute, but no x, y attributes. <BR>Solution: var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;<BR>If you consider question 8, use myEvent instead Just replace event. <br><br><STRONG>event.srcElement problem<BR>Problem description: Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but no srcElement attribute. <BR>Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;<BR>If you consider question 8, just use myEvent instead of event. <br><br><STRONG>window.location.href problem<BR>Problem description: Under IE or Firefox2.0.x, you can use window.location or window.location.href; Firefox1.5.x Under this condition, only window.location can be used. <BR>Solution: Use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method. <br><br><STRONG>Problems with modal and non-modal windows<BR>Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, this is not possible. <BR>Solution: Directly use window.open(pageURL,name,parameters) to open a new window. <BR>If you need to pass parameters in the child window back to the parent window, you can use window.opener in the child window to access the parent window. If you need the parent window to control the child window, use var subWindow = window.open(pageURL,name,parameters); to obtain the newly opened window object. <br><br><STRONG>Frame and iframe issues<BR>Take the following frame as an example: <BR><frame src=”xxx.html” id=”frameId” name=”frameName” /><BR>(1) Access the frame object<BR>IE: use window.frameId Or window.frameName to access this frame object; <BR>Firefox: Use window.frameName to access this frame object; <BR>Solution: Use window.document.getElementById("frameId") uniformly to access this frame object;<br><br>(2) Switch frame content<BR>In both IE and Firefox, you can use window.document.getElementById("frameId").src = "xxx.html" or window.frameName.location = "xxx. html" to switch the content of the frame; <BR> If you need to pass the parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window. <br><br><STRONG>body loading problem<BR>Problem description: Firefox’s body object exists before the body tag is fully read by the browser; while IE’s body object must be in the body tag It does not exist until it is completely read by the browser. <BR>[Note] This issue has not been verified yet and will be modified after verification. <BR>[Note] It has been verified that the above problem does not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if the element has not been loaded yet. <br><br><STRONG>Event delegation method<BR>Problem description: Under IE, use document.body.onload = inject; where function inject() has been implemented before; under Firefox, use document.body.onload = inject();<BR>Solution: Use document.body.onload=new Function("inject()"); or document.body.onload = function(){/* Here is the code */}<BR>[Note] The difference between Function and function<br><br><STRONG>The difference in the parent element accessed<BR>Problem description: Under IE, use obj.parentElement or obj.parentNode Access the parent node of obj; under Firefox, use obj.parentNode to access the parent node of obj. <BR>Solution: Because both firefox and IE support DOM, obj.parentNode is used uniformly to access the parent node of obj.<br><br><STRONG>커서:손 VS 커서:포인터<BR>문제 설명: Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다. 둘 다 손 지침입니다. <BR>해결책: 포인터를 균일하게 사용하십시오. <br><br><STRONG>innerText 문제<BR>문제 설명: innerText는 IE에서는 정상적으로 작동하지만, innerText는 FireFox에서는 작동하지 않습니다. <BR>해결 방법: IE가 아닌 브라우저에서는 innerText 대신 textContent를 사용하세요. <BR>예: <BR>if(navigator.appName.indexOf("Explorer") >-1){<BR>document.getElementById("element").innerText = "내 텍스트";<BR>}else{ <BR>document.getElementById("element").textContent = "my text";<BR>}<BR>[참고] innerHTML은 IE 및 Firefox와 같은 브라우저에서 지원됩니다. 즉, 사용하지 않는 것이 가장 좋습니다. <br><br><STRONG>객체 너비 및 높이 할당 문제<BR>문제 설명: FireFox의 obj.style.height = imgObj.height와 유사한 문이 잘못되었습니다. <BR>해결 방법: obj.style.height = imgObj.height "px"를 균일하게 사용하세요. IE에서는 tr을 추가하기 위해 js를 사용할 때 table 및 tr의 innerHTML 할당이 허용되지 않습니다. ,appendChild 메서드가 작동하지 않습니다. <br>해결책: <br>//테이블에 빈 행 추가: <STRONG>var row = otable.insertRow(-1);var cell = document.createElement("td");<BR> cell.innerHTML = “”;<BR>cell.className = “XXXX”;<BR>row.appendChild(cell);<BR>[참고] 저는 JS를 사용하여 테이블을 직접 조작하는 경우가 거의 없기 때문에 이런 문제를 겪은 적이 없습니다. . 테이블을 운영하려면 JQuery와 같은 JS 프레임워크를 사용하는 것이 좋습니다. <BR><BR><BR>ul 및 ol 목록의 들여쓰기 문제<BR><BR>ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일은 list-style:none;margin:0px로 작성해야 합니다. ;padding:0px ;<br>margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다. ← 이 문장은 잘못 기재되어 있습니다. 자세한 내용은 ↓<br>를 참조하세요.[참고] 이 문제는 실제로 검증되지 않았으며 검증 후 수정될 예정입니다. <STRONG>[참고] IE에서는 margin:0px를 설정하면 목록의 위쪽, 아래쪽, 왼쪽 및 오른쪽 들여쓰기, 공백 및 목록 번호나 점을 제거할 수 있는 것으로 확인되었습니다. 패딩 설정은 스타일에 영향을 주지 않습니다. Firefox에서는 margin:0px만 설정합니다. padding:0px를 설정한 후에는 왼쪽 및 오른쪽 들여쓰기만 제거할 수 있습니다. 목록 번호나 점을 제거하려면 list-style:none도 설정해야 합니다. 즉, IE에서는 margin:0px만 설정하면 최종 효과를 얻을 수 있지만, Firefox에서는 margin:0px, padding:0px, list-style:none을 동시에 설정해야 최종 효과를 얻을 수 있습니다. <BR><BR>CSS 투명성 문제<BR><BR>IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). <br>FF:불투명도:0.6. <br>[참고] 둘 다 작성하고 아래에 불투명도 속성을 넣는 것이 가장 좋습니다. <STRONG><BR>CSS 둥근 모서리 문제<BR><BR>IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다. <br>FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -경계 반경-오른쪽 아래:4px;. <br>[참고] 둥근 모서리 문제는 CSS의 전형적인 문제입니다. 둥근 모서리를 설정하려면 JQuery 프레임셋을 사용하고 이러한 복잡한 문제는 다른 사람에게 맡기는 것이 좋습니다.</script>