1.firefox cannot support innerText.
firefox supports innerHTML but does not support innerText. It supports textContent to implement innerText, but the unnecessary spaces are also preserved by default. If you do not use textContent, if the string does not contain HTML code, you can also use innerHTML instead.
2. It is prohibited to select web page content:
In IE, js is generally used: 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 events:
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);
5. Get the mouse position:
IE: event.clientX, event.clientY
firefox: event function needs to pass event object
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}
6. Boundary issues of elements such as DIV:
For example: Set a div's CSS::{width:100px;height:100px;border:#000000 1px solid;}
In IE: the width of the div (including border width): 100px, the height of the div (including border width): 100px;
And firefox: the width of the div (including border width): 102px, the height of the div (including border width): 102px;
So when doing this drag window that is compatible with IE and firefox, you should use your brain to write js and css, and give you two tips
1. Determine the browser type:
var isIE=document.all? true:false;
I wrote a variable, if document.all syntax is supported then isIE=true, otherwise isIE=false
2. CSS processing in different browsers:
Generally, you can use !important to prioritize css statements (only supported by firefox)
For example: {border-width:0px!important;border-width:1px;}
Under firefox, this element has no border, and under IE, the border width is 1px
1.document.formName.item("itemName") problem
Problem description: In IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName"]; in Firefox, you can only use document.formName.elements["elementName"].
Solution: Use document.formName.elements["elementName"] in a unified manner.
2. Collection object problem
Problem description: In IE, you can use () or [] to get the collection class object; in Firefox, you can only use [] to get the collection class object.
Solution: Use [] to obtain collection class objects in a unified manner.
3. Custom attribute issues
Problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Workaround: uniformly obtain custom attributes through getAttribute().
4.eval("idName") problem
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get HTML object with idName; in Firefox, you can only use getElementById("idName") to get HTML object with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
5. Problem with the same variable name as the HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the variable name that is the same as the HTML object ID can be used, but not in IE.
Workaround: Use document.getElementById("idName") instead of document.idName. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add the var keyword to avoid ambiguity.
6.const issue
Problem description: In Firefox, you can use the const keyword or the var keyword to define constants; in IE, you can only use the var keyword to define constants.
Solution: Use the var keyword to define constants uniformly.
7. Input.type attribute problem
Problem description: The input.type property under IE is read-only; but the input.type property under Firefox is read-write.
Solution: Do not modify the input.type property. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.
8.window.event problem
Problem description: window.event can only run under IE, not in Firefox, because Firefox event can only be used on the scene where the event occurs.
Solution: Add event parameters to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
Example:
The code copy is as follows:
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
9. Event.x and event.y issues
Problem description: 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 the 8th issue, just use myEvent instead of event.
10.event.srcElement Problem
Problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property.
Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider the 8th issue, just use myEvent instead of event.
11.window.location.href problem
Problem description: In IE or Firefox2.0.x, you can use window.location or window.location.href; in 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 problems
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot.
Solution: 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 the parent window needs 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
The following frame is an example:
<frame src="xxx.html" id="frameId" name="frameName" />
(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") 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
Problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It has been proved that the above problems do 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 this element has not been loaded yet.
15. Event delegate method
Problem description: In IE, use document.body.onload = inject; where function inject() has been implemented before this; in 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 between accessed parent elements
Problem description: Under IE, use obj.parentElement or obj.parentNode to access obj's parent node; under firefox, use obj.parentNode to access obj's parent node.
Solution: Because both firefox and IE support DOM, obj.parentNode is used to access obj's parent node.
17.cursor:hand VS cursor:pointer
Problem description: Firefox does not support hand, but ie supports pointer, both are hand-shaped indicators.
Solution: Use pointer in a unified way.
18. The problem with innerText.
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
Workaround: Use textContent instead of innerText in non-IE browsers.
Example:
The code copy 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. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
19. Object width and height assignment problem
Problem description: The statement similar to obj.style.height = imgObj.height in FireFox is invalid.
Solution: Use obj.style.height = imgObj.height + 'px' in uniform;
20. Table operation issues
Problem description: IE, firefox and other browsers have different operations on table tags. In ie, it is not allowed to assign innerHTML values to table and tr. When using js, using appendChild method does not work.
Solution:
The code copy is as follows:
//Add a blank line 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 operate tables directly, I have never encountered this problem. It is recommended to use JS framework sets to manipulate tables, such as JQuery.
21. Issue of ul and ol list indentation
When eliminating indentation of lists such as ul, ol, etc., 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 incorrect, see for details↓
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It has been proved that in IE, setting margin:0px can remove the up and down left and right indents, blanks, list numbers or dots of the list, and setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the up and down white space, and after setting padding:0px can only remove the left and right indents, and you must also set list-style:none to remove the list number or dots. In other words, in IE, you can achieve the final effect by simply setting margin:0px, padding:0px and list-style:none must be set at the same time in Firefox 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 place the opacity attribute below.
23. CSS rounded corner problem
IE: The following versions of 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 framework set to set rounded corners to leave these complex problems for others to think about.
There are too many questions about CSS, and even the same CSS definitions have different display effects in different page standards. A suitable suggestion is that the page is written in the standard DHTML standard, and the use of tables is rarely used. The CSS definition should be based on the standard DOM as much as possible, and the mainstream browsers such as IE, Firefox, and Opera are also taken into account. BTW, in many cases, the CSS interpretation standards of FF and Opera are closer to the CSS standards and are more standardized.