Misunderstandings and differences between JavaScript and CSS in IE and Firefox

1. Collection class Object Problems
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by Firefox.
Solution: use [] as the subscript operation. For example, change document. Forms ("formname")

JS Code

1. Document. Forms ["formname"];
2. // Another example is:
3. Document. getelementsbyname ("inputname") (1 );
4. // Change
5. Document. getelementsbyname ("inputname") [1];

Document. forms ["formname"]; // another example is document. getelementsbyname ("inputname") (1); // change it to document. getelementsbyname ("inputname") [1];

2. Div object
In ie, the DIV object can use ID directly as the object variable name. Not in Firefox.
Divid. style. Display = "NONE ";
Solution: Document. getelementbyid ("divid"). style. Display = "NONE ";
PS: whether it is a div object or not, the getelementbyid method should be used.

3. About Frame
Existing Problem: You can use window. testframe in IE to obtain the frame, but not in MF.
Solution: the main difference between Firefox and IE in frame usage is:
If the following attributes are written in the frame tag:
Then Ie can access the window object corresponding to this frame through ID or name.
However, MF can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the HTM in the top window, you can access
IE: window. Top. frameid or window. Top. framename to access this window object
Firefox: only window. Top. framename can access this window object.
In addition, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.

4. Window
Existing problems: in IE, you can open modal and non-modal windows through showmodaldialog and showmodelessdialog, but Firefox does not.
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass parameters, you can use frame or IFRAME.

5. When defining various object variable names in JS, use ID whenever possible to avoid using name.
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be used in Firefox, so use ID whenever possible to avoid using only name instead of ID.

6. Document. All
Firefox is compatible with document. All, but generates a warning. You can use getelementbyid ("*") or getelementbytagname ("*) instead.
However, attributes such as document. All. length are completely incompatible. Do not use the document. All attribute whenever possible.

7. parentelement
In IE, you can use parentelement and parentnode to obtain the parent node.
Firefox can only use parentnode.

8. Event
W3C does not support windows. Event
For example, in IE:

JS Code

1. Function onmenuclick (){
2. Collapsemenu (event. srcelement );
3. }

function onMenuClick(){collapseMenu(event.srcElement);}

Working properly. But in Firefox, it is changed:

JS Code

1. Function onmenuclick (EVT ){
2. If (EVT = NULL)
3. EVT = Window. event; // for IE
4. VaR srcelement = EVT. srcelement? EVT. srcelement: evt.tar get;
5. // Ie uses srcelement, while Firefox uses target
6. Collapsemenu (srcelement );

Function onmenuclick (EVT) {If (EVT = NULL) EVT = Window. event; // For ievar srcelement = EVT. srcelement? EVT. srcelement: evt.tar get; // ie uses srcelement, while Firefox uses targetcollapsemenu (srcelement );

9. event. X and event. Y
In ie, the event object has the X and Y attributes, but not in Firefox.
Solution:
In Firefox, event. X is equivalent to event. pagex. But event. pagex IE does not.
Therefore, event. clientx is used instead of event. X. This variable is also available in IE.
Event. clientx is slightly different from event. pagex (when the page has a scroll bar ),
But most of the time is equivalent.
If it is the same, it may be a little troublesome:

JS Code

1. MX = event. X? Event. X: event. pagex;

mX = event.x ? event.x : event.pageX;

Use MX instead of event. x

10. The problem of getting an object using the idname string
In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in Firefox.
Solution: Use getelementbyid (idname) instead of eval (idname ).

14. nodename and tagname Problems
In Firefox, all nodes have a nodename value, but textnode does not have a tagname value.
In IE, nodename may be used.
Solution:
Use tagname, but check whether it is empty.

15. Type attribute of input
The input. Type attribute in IE is read-only, but can be modified in Firefox.

16. Custom Attributes
In MF, the defined attributes must be obtained by getattribute ().
Ie can be obtained directly through the "." operator.

17. Const Problems
You cannot use the const keyword in IE. For example
Const constvar = 32;
In IE, This Is A syntax error.
Solution:
Use VaR instead of Const.

18. Body object
Firefox's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

19. Analysis of ALT and title of IMG objects
ALT: the prompt when the photo does not exist or the load error occurs,
Title: Photo Tip description,
If title is not defined in IE, ALT can also be used as the IMG tip. However, in Firefox, the two are completely used according to the standard definition.
When defining IMG objects, it is best to write all ALT and title objects to ensure normal use in various browsers.

20. nodes obtained by childnodes
The meanings of childnodes are different in IE and Firefox. Using Dom standards in Firefox, blank text nodes are inserted in childnodes.
When obtaining a subnode, you can avoid this problem by using node. getelementsbytagname.

21. removenode ()
The node in Firefox does not have the removenode method. You must use the following method:

JS Code

1. Node. parentnode. removechild (node );

node.parentNode.removeChild(node);

22. innertext
Supported by IE, not supported by Firefox
The textconent attribute is used to set the content text in ff.

23. Differences between XMLHTTP
The creation method in Firefox is as follows:

JS Code

1. XMLHTTP = new XMLHttpRequest ()

xmlhttp=new XMLHttpRequest()

In ie:

JS Code

1. XMLHTTP = new activexobject ("Microsoft. XMLHTTP ")

xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”)

24. img src refresh
You can use IE to refresh images, but not Firefox. The main issue is caching. Add a random number after the address to solve the problem:

JS Code

1. Myimg. src = This. SRC + '? '+ Math. Random ();

myImg.src=this.src+’?'+Math.random();

25. setattribute () attribute setting
Many Attributes in IE cannot be set with setattribute, but can be set in Firefox, for example:

JS Code

1. Thediv. setattribute ('style', 'color: red ');
2. // Change:
3. Object.style.css text = 'color: red ;';
6. Setattribute ('class', 'styleclass ')
7. // Change:
8. Setattribute ('classname', 'styleclass ');
11. OBJ. setattribute ('onclick', 'funcitonname ();');
12. // Change:
13. OBJ. onclick = function () {fucntionname ();};

Thediv. setattribute ('style', 'color: red'); // change to object.style.css text = 'color: red; '; setattribute ('class', 'styleclass ') // change to: setattribute ('classname', 'styleclass'); obj. setattribute ('onclick', 'funcitonname (); '); // change to: obj. onclick = function () {fucntionname ();};

... And so on

Bytes -----------------------------------------------------------------------------------------

Difference between IE and Firefox in parsing CSS

1. Resolution of height
IE: the actual height will be used even if the height of the image content is defined based on the height change of the content, including the undefined height of the image content, when the content exceeds the height
Firefox: when no height is defined, if the image content is included in the content, the height resolution of Firefox is based on the printing standards, which will cause a highly inconsistent situation with the actual content; when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.
Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy!

3. layout problems
When you write CSS, especially when you use float: left (or right) to arrange one-click images, you will find that there is a normal problem in Firefox and IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help.
In fact, there is another problem here, that is, the processing of spaces by IE. Firefox ignores the processing of spaces between blocks by IE. That is to say, the end of a div should be followed by a DIV, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.
Unfortunately, I encountered this problem again, connecting multiple IMG labels and defining float: left. I hope these images can be connected. However, the results are normal in Firefox, and each IMG displayed in IE is 3 px apart. Deleting spaces between tags does not work.
Later, the solution was to set Li outside IMG and define margin: 0 for Li, which solved the display deviation between IE and Firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more.
This is just a few simple differences. You can consider it comprehensively during layout and CSS design, but table is the most effective and simple solution to compatibility problems, the table has a good performance in terms of compatibility.

4. Mouse Style
Firefox does not support hand, But ie supports pointer
Solution: Use Pointer

5. Padding Problems
Padding 5px 4px 3px 1px Firefox cannot be abbreviated,
Must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px;

6. unindent ul, ol, and other lists
The indent style of the list such as UL and ol 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.

7. Transparent CSS
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.

8. CSS rounded corners
IE: rounded corners are not supported.
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 ;.

9. CSS double-line concave and convex border
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;

10. Filter
Filters are supported in IE, but not in Firefox.

11. Prohibit the selection of webpage content:
In IE, JS: obj. onselectstart = function () {return false ;}; is generally used ;};
Firefox uses CSS:-moz-user-select: none;