[Reprinted] differences between IE and Firefox in JS and CSS

Source: Internet
Author: User

From: http://blog.csdn.net/mengyao/archive/2008/05/22/2468068.aspx
Easy to view

1. Firefox cannot support innertext.
Firefox supports innerhtml but does not support innertext. It supports textcontent to implement innertext, but by default, redundant spaces are retained. If textcontent is not used, if the string does not contain HTMLCodeYou can also use innerhtml instead.

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

3. Filter support (for 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: The event object needs to be passed by the event function.
OBJ. onmousemove = function (EV ){
X = eV. pagex; y = eV. Pagey;
}

6. Limitations of Div and other elements:
For example, set CSS ::{ width: 100px; Height: 100px; Border: #000000 1px solid;} Of a div ;}
In ie: div width (including Border width): 100px, div height (including Border width): 100px;
Firefox: div width (including Border width): 102px, div height (including Border width): 102px;

So when we drag windows compatible with IE and Firefox, we need to use some brains 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 the document. All syntax is supported, isie = true; otherwise, isie = false.

2. CSS processing in different browsers:
Generally, it can be used! Important Uses CSS statements first (only supported by Firefox)
For example: {border-width: 0px! Important; border-width: 1px ;}
In Firefox, this element has no border, and the Border Width under IE is 1px.

1.doc ument. formname. Item ("itemname ")
Problem description: in IE, you can use document. formname. item ("itemname") or document. formname. elements ["elementname"]; In Firefox, only document. formname. elements ["elementname"].
Solution: Use document. formname. elements ["elementname"].

2. Collection class Object Problems
Problem description: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.

3. Custom Attributes
Problem description: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getattribute () to obtain Custom Attributes. In Firefox, you can only use getattribute () obtain custom attributes.
Solution: Get custom attributes through getattribute.

4. eval ("idname") Problems
Problem description: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname; in Firefox, you can only use getelementbyid ("idname") to obtain the HTML object whose ID is idname.
Solution: getelementbyid ("idname") is used to retrieve the HTML object whose ID is idname.

5. The variable name is the same as the ID of an HTML object.
Problem description: in IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not in Firefox. In Firefox, the variable name that is the same as the ID of the HTML object can be used, IE.
Solution: Use document. getelementbyid ("idname") to replace document. idname. We recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add the VaR keyword to avoid ambiguity.

6. Const Problems
Problem description: In Firefox, you can use the const keyword or 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.

7. Input. Type attribute Problems
Problem description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.
Solution: do not modify the input. Type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.

8. Window. Event Problems
Problem description: window. event can only be run in IE, but not in Firefox, because Firefox Event can only be used in the event.
Solution: add the event parameter to the function where the event occurs and use VaR myevent = EVT? EVT :( window. event? Window. Event: NULL)
Example: <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
Problem description: in IE, the even object has the X and Y attributes, but does not have the pagex and Pagey attributes. In Firefox, the even object has the pagex and Pagey attributes, but does not have the X and Y attributes.
SolutionMethod: var myx = event. X? Event. X: event. pagex; var myy = event. Y? Event. Y: event. Pagey;
If you consider 8th issues, use myevent instead of event.
Generic: both have the event. clientx and event. clienty attributes.

10. event. srcelement Problems
Problem description: in IE, the even object has the srcelement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcelement attribute.
Solution: Use srcobj = event. srcelement? Event. srcelement: event.tar get;
If you consider 8th issues, use myevent instead of event.

11. Window. Location. href
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.
Solution: Use window. location to replace window. Location. href. Of course, you can also consider using the location. Replace () method.

12. Modal and non-modal window Problems
Problem description: in IE, you can open modal and non-modal windows through showmodaldialog and showmodelessdialog; in Firefox, you cannot.
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
IfYesPass the 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 a parent window to control the child window, use VaR subwindow = Window. Open (pageurl, name, parameters); to obtain the new window object.

13. Frame and IFRAME Problems
The following frame is used as an example:
<Frame src = "xxx.html" id = "frameid" name = "framename"/>
(1) access the frame object
IE: Use window. frameid or window. framename to access this frame object;
Firefox: Use window. framename to access this frame object;
Solution: You can access the frame object by using the metadata Doc ument. getelementbyid ("frameid;

(2) Switching frame content
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("frameid"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content;
If you want to return the parameters in the frame to the parent window, you can use the parent keyword in the frame to access the parent window.

14. Body Loading Problems
Problem description: 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] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that IE6, opera9, and firefox2 do not have the above problems. A simple JS script can access all objects and elements that have been loaded before the script, this element is not loaded yet.

15. Event delegation Method
Problem description: in IE, use document. Body. onload = inject; where function inject () has beenImplementation; In FUnder irefox, use document. Body. onload = inject ();
Solution: Use document. Body. onload = new function ('inject () '); or document. Body. onload = function () {/* here is the code */}
[Note] differences between functions

16. Differences between parent elements for access
Problem description: in IE, use obj. parentelement or obj. parentnode to access the parent node of obj. In Firefox, use obj. parentnode to access the parent node of obj.
SolutionMethod: because Firefox and IE support DOM, obj. parentnode is used to access the parent node of obj.

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

18. innertext problems.
Problem description: innertext can work normally in IEWorkBut innertext does not work in Firefox.
Solution: Use textcontent instead of innertext in a non-IE browser.
Example:
If (navigator. appname. indexof ("Explorer")>-1 ){
Document. getelementbyid ('element'). innertext = "My text ";
} Else {
Document. getelementbyid ('element'). textcontent = "My text ";
}
[Note] innerhtml is supported by IE, Firefox, and other browsers at the same time. Others, such as outerhtml, are only supported by IE, so it is best not to use it.

19. Assignment of object width and height
Problem description: The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.
Solution: Use obj. style. Height = imgobj. height + 'px ';

20. table Operation Problems
Description: operations on table labels vary with IE, Firefox, and other browsers, you cannot assign values to the innerhtml values of table and TR in IE. When you add a TR value to JS, The appendchild method does not work.
solution:
// 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] I have never encountered this problem because I seldom use js to directly operate tables. We recommend that you use the JS framework set to operate tables, such as jquery.

21. Questions about UL and ol list indentation
When the indentation of UL and ol lists is eliminated, 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. For details, refer to the statement.
[Note] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that in IE, setting margin: 0px can remove indentation, white spaces, list numbers, or dots from the top, bottom, and right of the list. Setting padding does not affect the style. In Firefox, setting margin: 0px can only remove the upper and lower spaces. After setting padding: 0px, only the left and right indentation can be removed. You must also set list-style: none to remove list numbers or dots. In other words, you can set only margin: 0px in IE to achieve the final effect. In Firefox, you must set both margin: 0px, padding: 0px, and list-style: none can achieve the final effect.

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

23. CSS rounded corners
IE: IE7 or earlier versions 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 issue in CSS. We recommend that you use the jquery framework set to set the rounded corner so that you can leave these complicated problems for others to think about.

There are too many questions about CSS, and even the display effects of the same CSS definition in different page standards are different. A developing suggestion is that pages are written in the standard DHTML standard, with fewer tables. CSS definitions should follow the standard DOM as much as possible, while taking into account mainstream browsers such as IE, Firefox, and opera. BTW, in many cases, FF and opera's CSS interpretation standards are closer to CSS standards and more normative.

Common JavaScript codes are compatible with IE and Firefox. 1. Document. getelementbyid is used to obtain controls, and document. All is not required (not supported by browsers such as ff)
2. <button> is interpreted by Firefox as submitting a form or refreshing the page. The standard <button type = "button">
3. Use childnode () to replace the previous Children
4. Use cursor: pointer instead of cursor: Hand
5. Get the defined attributes. Use document. getelementbyid ("TD1"). getattribute ("isobj") instead of document. getelementbyid ("TD1"). isobj
6. Event appending method: attachevent (IE)/detachevent; addeventlistener (Mozilla, Netscape, Firefox)/removeeventlistener
Or directly use obj. onmouseover = func;
7. The event time does not exist in Firefox. The time must be obtained through the object itself.
How to get the coordinates of the current object in Firefox:
Document. onmousemove = inti_move;
Function inti_move (ERT)
{
X = ERT. pagex;
}
Table 4 event attribute differences between Mozilla and IE
Internet Explorer name Mozilla name Description
Altkey Altkey Boolean property that returns whether the Alt key was pressed during the event.
Cancelbubble Stoppropagation () Used to stop the event from bubbling farther up the tree.
Clientx Clientx The X coordinate of the event, in relation to the element viewport.
Clienty Clienty The Y coordinate of the event, in relation to the element viewport.
Ctrlkey Ctrlkey Boolean property that returns whether the ctrl key was pressed during the event.
Fromelement Relatedtarget For mouse events, this is the element from which the mouse moved away.
Keycode Keycode For Keyboard Events, This Is A number representing the key that was pressed. It is 0 for mouse events.
Returnvalue Preventdefault () Used to prevent the event's default action from occurring.
Screenx Screenx The X coordinate of the event, in relation to the screen.
Screeny Screeny The Y coordinate of the event, in relation to the screen.
Shiftkey Shiftkey Boolean property that returns whether the Shift key was pressed during the event.
Srcelement Target The element to which the event was originally dispatched.
Toelement Currenttarget For mouse events, this is the element to which the mouse moved.
Type Type Returns the name of the event.

8> Problem Solving of event. keycode
There is no window. event. keycode Atomicity in ff. You can use the following methods to solve the problem:

Function Keepkeynum (EVT)
{
VaR K = Window. Event ? EVT. keycode: EVT. Which;
If (K <= 57 ) && (K > = 48 ))
{Return True;}
Else  
{Return False;}
}   ! Input Type = "Text" Onkeypress = "Return keepkeynum (event );"   >

The current coordinates of the mouse (plus the scroll bar rolling distance)
IE: event. offsetx and event. offsety.
FF: event. layerx and event. layery.
Coordinates of tag X and Y: style. posleft and style. postop
IE: Yes.
FF: No.
Generic: object. offsetleft and object. offsettop.

Height and width of the form
IE: Document. Body. offsetwidth and document. Body. offsetheight. Note: The page must have a body tag.
FF: always specify innerwidthand always specify innerhegihtto use document.documentelement.clientwidthand document.doc umentelement. clientheight.
Generic: Document. Body. clientwidth and document. Body. clientheight.

Add event
IE: element. attachevent ("onclick", func );.
FF: element. addeventlistener ("click", func, true ).
Generic: element. onclick = func. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. For example, element. attachevent ("onclick", func1); element. attachevent ("onclick", func2) will be executed in both func1 and func2.

Custom Attributes of tags
IE: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
FF: you cannot use div1.value or div1 ["value.
General purpose: div1.getattribute ("value ").

Parent node, child node, and delete node
IE: parentelement, parement. Children, element. romovenode (true ).
FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).

JS compatibility issues in ff and IE (for example)

After a few weeks of JS compatibility, I have summarized several experiences. Below I will list the common alternative writing methods and differences in FF, which will be shared by everyone.
1, Document. getelementbyid replaces document. All (applicable to IE)
2, Set [] substitution () (ie applies)
3, Target replaces srcelement; parentnode replaces parentelement (applicable to parentnode IE)
4, Node. parentnode. removechild (node) replaces removenode (this) (for IE)
5, There is a blank text node (FF parses the blank text into a node)
6, No outerhtml attribute
7, Event local variable E replaces event global variable event
8, E. The key value of the button is different from the event. Button. There are only three key values without the key combination.
9, No ondrag event
10, Dommousescroll replaces onmousewheel;-E. Detail replaces event. wheeldelta
11, Addeventlistener replaces attachevent; removeeventlistener replaces detachevent
12, E. preventdefault () replace event. returnvalue = false; E. stoppropagation () replace event. cancelbubble = true
13, Strictly check "PX" units such as style. Top and style. Left (applicable to "PX" ie)
14, Style = "-moz-opacity: 0.9" alternative style = "filter: alpha (opacity = 90)"; no other Filters
15, Style. cursor = "Pointer" to replace style. cursor = "hand" (for IE)
16, Replacing ALT with title (applicable to IE)
17, The status bar cannot be modified by default. You need to adjust the FF setting.
18, The built-in drawing function replaces VML with canvas or SVG
19, When code errors occur, do not report any errors. (It is also FF's helplessness. If every unique expression of IE reports an error in it, I am afraid it will fail to be reported)
20, Very bad for cache cleaning
Note: It is recommended to indicate that "ie applies" for general purposes, but not for IE.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.