Differences between js in IE and firefox_Basic knowledge

1.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.

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

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

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

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

6. Boundary issues of DIV and other elements:
For example: set the CSS of a div::{width:100px;height:100px;border:#000000 1px solid;}
In IE: div width (including border width): 100px, div height (including 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;

So when making this dragging window that is compatible with IE and Firefox, you have to use your brain when writing js and css. Here are two tips for you

1. Determine the 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

2. 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;}
Under Firefox, this element has no border. Under IE, the border width is 1px

1.document.formName.item("itemName") problem
Description of the problem: 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.

2. Collection object problem
Description of the problem: 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 class objects.

3. Custom attribute issues
Description of the problem: Under IE, you can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Uniformly obtain custom attributes through getAttribute().

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

5. The problem that the variable name is the same as an HTML object ID
Description of the problem: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of document, but not under Firefox; under Firefox, the same variable name as the HTML object ID can be used, but not under IE.
Workaround: 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.

6.const problem
Description of the problem: 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.

7.input.type attribute problem
Description of the problem: 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.

8.window.event problem
Description of the problem: window.event can only be run under IE, not Firefox. This is because Firefox's event can only be used at the scene where the event occurs.
Solution: Add the event parameter to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
in the function body (assuming the formal parameter is evt) Example:

Copy code The code is as follows:

9.Event.x and event.y issues
Description of the problem: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
If you consider question 8, just use myEvent instead of event.

10.event.srcElement problem
Description of the problem: Under IE, the even object has the srcElement attribute, but not the target attribute; under Firefox, the even object has the target attribute, but there is no srcElement attribute.
Solution: use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider question 8, just use myEvent instead of event.

11.window.location.href problem
Description of the problem: Under IE or Firefox2.0.x, you can use window.location or window.location.href; under Firefox1.5.x, you can only use window.location.
Workaround: Use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.

12. Modal and non-modal window issues
Description of the problem: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; however, this cannot be done under Firefox.
Solution: Directly use window.open(pageURL,name,parameters) to open a new window.
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.

13.Frame and iframe issues
Take the following frame as an example:

(1)Access frame object
IE: Use window.frameId or window.frameName to access this frame object;
Firefox: Use window.frameName to access this frame object;
Solution: Use window.document.getElementById("frameId") uniformly to access this frame object;

(2) Switch frame content
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;
If you need to pass parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window.

14.body loading problem
Description of the problem: Firefox's body object exists before the body tag is fully read by the browser; while IE's body object must exist after the body tag is fully read by the browser.
​​​[Note] This issue has not been actually verified and will be modified after verification.
[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.

15. Event delegate method
Description of the problem: Under IE, use document.body.onload = inject; where function inject() has been implemented before; under Firefox, use document.body.onload = inject();
Solution: Use document.body.onload=new Function('inject()'); or document.body.onload = function(){/* Here is the code */}
         [Note] The difference between Function and function

16. Differences in accessed parent elements
Description of the problem: Under IE, use obj.parentElement or obj.parentNode to access the parent node of obj; under Firefox, use obj.parentNode to access the parent node of obj.
Solution: Because both firefox and IE support DOM, obj.parentNode is used uniformly to access the parent node of obj.

17.cursor:hand VS cursor:pointer
Description of the problem: Firefox does not support hand, but IE supports pointer. Both are hand instructions.
Solution: Use pointer uniformly.

18.InnerText problem.
Problem description: innerText works normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in non-IE browsers.
Example:

Copy code The code is as follows:

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

[Note] innerHTML is supported by browsers such as IE and Firefox at the same time. Others, such as outerHTML, are only supported by IE and are best not used.

19. Object width and height assignment problem
Problem description: Statements like obj.style.height = imgObj.height are invalid in FireFox.
Solution: Use obj.style.height = imgObj.height 'px';

20. Table operation issues
Problem description: IE, Firefox and other browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, the appendChild method does not work.
Solution:

Copy code The code is as follows:

//Append an empty row to the table:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);

[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.

21. Indentation problem of ul and ol lists
When eliminating the indentation of lists such as ul and ol, the style should be written as: list-style:none;margin:0px;padding:0px;
The margin attribute is valid for IE, and the padding attribute is valid for FireFox. ← This sentence is incorrectly expressed, see ↓
for details ​​​[Note] This issue has not been actually verified and will be modified after verification.
[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 can only remove the upper and lower indents. 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.

22. CSS transparency issue
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF: opacity: 0.6.
​​​[Note] It is best to write both and put the opacity attribute below.

23. CSS rounded corners problem
IE: Versions below ie7 do not support rounded corners.
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;.
[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.

There are too many problems in CSS, and even the same CSS definition has different display effects in different page standards. A suggestion that is suitable for development is that the page should be written using the standard DHTML standard, with less use of tables, and CSS definitions should be based on the standard DOM as much as possible, taking into account mainstream browsers such as IE, Firefox, and Opera. BTW, in many cases, the CSS interpretation standards of FF and Opera are closer to the CSS standards and more normative.