The topic we are discussing is CSS web page layout. The most troublesome issue for everyone is browser compatibility. Although 52CSS.com has introduced a lot of knowledge in this direction, it still makes many developers confused. Today’s article will list css There are twenty-three differences between JavaScript and JavaScript in IE and Firefox. I hope it will be helpful to everyone's learning.
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. Problems with collection objects <br /> 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 class objects.
3. Custom attributes problem <br /> Problem description: Under IE, you can use the method of obtaining regular attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; under Firefox, you can only use getAttribute() to obtain them. Custom properties.
Solution: Uniformly obtain custom attributes through getAttribute().
4. eval("idName") problem <br /> Problem description: Under IE, you can use eval("idName") or getElementById("idName") to obtain the HTML object with the id idName; under Firefox, you can only use getElementById ("idName") to obtain 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 the ID of an HTML object <br /> Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not under Firefox; under Firefox, it can be used with the HTML object Variable names with the same ID cannot be used 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 <br /> 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.
7. Problem with input.type attribute <br /> 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 <br /> Problem description: window.event can only be run under IE, but not under 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:
Example Source Code [www.downcodes.com] <input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
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 <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.
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 <br /> Problem description: 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 <br /> Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, this cannot be done.
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 <br /> Take the following frame as an example:
<frame src="http://www.downcodes.com/123.html" id="frameId" name="frameName" />
(1) Access the frame object IE: use window.frameId or window.frameName to access the frame object;
Firefox: Use window.frameName to access this frame object;
Solution: Use window.document.getElementById("frameId") uniformly to access this frame object;
(2) To switch frame content, you can use window.document.getElementById("frameId").src = "52css.com.html" or window.frameName.location = "52css.com.html" in both IE and Firefox. 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 <br /> 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 be loaded after the body tag is fully read by the browser. exist.
[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 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( );
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 <br /> Problem description: 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 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. Problems with innerText.
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:
Example Source Code [www.downcodes.com] if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. Object width and height assignment problem <br /> Problem description: Statements similar to obj.style.height = imgObj.height in FireFox are invalid.
Solution: Use obj.style.height = imgObj.height + 'px'; uniformly.
20. Table operation issues <br /> Description of the problem: IE, Firefox and other browsers have different operations on the table tag. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, Using the appendChild method doesn't work either.
Solution:
Example Source Code [www.downcodes.com] //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);
21. Indentation problem of ul and ol lists <br /> When eliminating the indentation of ul, ol and other lists, 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, please 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 problem 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 frame set 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. For more knowledge, please refer to the article on 52CSS.com. A suggestion that is in line with development is that the page should be written using the standard DHTML standard, with less use of tables. The CSS definition 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. 