JS and CSS in IE and Firefox (FF) are different

Source: Internet
Author: User

Differences between JS and CSS in IE and Firefox (FF)
CSS:
1.
In the UL tag, FF has a padding value, but there is no margin value. In ie, the opposite is true.
Solution: Set UL's padding and margin to 0 (or not 0), for example, padding: 0; margin: 0; List-style: none;
JS:
1.
In IE, innertext is not in ff, and textcontent is used;
Eg: CopyCode The Code is as follows: var OBJ = Document. getelementbyid ("_ TD ");
VaR text;
If (obj. innertext ){
TEXT = obj. innertext;
} Else if (obj. textcontent ){
TEXT = obj. textcontent;
}

2.
In Ajax, the returned object state Ie can use readystate, but the returned object state in FF must be readystate. Therefore, it is best to write readystate.
3. Obtain the keyboard return values in IE and ff,
<Input type = "text" onkeyup = "test (event)"/>
Function Test (e ){
VaR keyc = getkeycode (E );
Alert (keyc );
}
Function getkeycode (e) {// obtain the keyboard event values in different browsers
VaR keyc;
If (window. Event) {// ie keyboard event
Keyc = E. keycode;
} Else if (E. Which) {// Firefox
Keyc = E. Which;
}
Return keyc;
}
4. add and remove events for objects
VaR OBJ = Document. getelementbyid ("_ tname ');
Add event:
If (obj. attachevent ){
OBJ. attachevent ("onchange", function (){
Otherfunction (Params); // you can pass parameters to the actual method or call other methods directly.
});
} Else if (obj. addeventlistener ){
OBJ. addeventlistener ("change", function (){
Otherfunction (Params );
}, False );
}
Remove event:
OBJ. onclick = NULL;
/* Why can't the following code work? The OBJ. onclick output in IE is anonymous. I hope experts can help solve this problem.
If (obj. detachevent ){
OBJ. detachevent ("onchange", test );
} Else if (obj. removeeventlistener ){
OBJ. removeeventlistener ("change", test, false );
}*/
5.
Event. X and event. Y in IE
In ff, only event. pagex and event. Pagey are available.
Both have the event. clientx and event. clienty attributes.
Solution:
VaR x = E. X? E. X: E. pagex; // E is the parameter passed in by the event object.
6. The input. Type attribute in IE is read-only, but can be modified in MF.
7. in IE, getelementsbyname (), (document. all [name] (not tested yet) cannot be used to obtain the DIV element (whether there are other elements that cannot be retrieved are unknown ).
8. trigger events through JS
<SCRIPT type = "text/JavaScript"> <! --
Function handertoclick (){
VaR OBJ = Document. getelementbyid ("btn1 ");
If (document. All) {// IE
OBJ. fireevent ("onclick ");
} Else {
VaR E = Document. createevent ('mouseevent ');
E. initevent ('click', false, false );
OBJ. dispatchevent (E );
}
}
// --> </SCRIPT>
<Input type = "button" value = "btn1" id = "btn1" onclick = "alert ('button btn1 click event')"/>
<Input type = "button" value = "trigger onclick event with ID btn1" onclick = "handertoclick ()"/>
9. In ie, the event object has the srcelement attribute, and in Firefox, the event object has the target attribute.
VaR OBJ = E. srcelement? E. srcelement: e.tar get; // E is the parameter passed in by the event object.
// The tests below are not available
10. attributes defined in FF must be obtained by getattribute ().
11. node Problems
Ie uses parentelement parement. Children, and FF uses parentnode. childnodes
Childnodes has different meanings in IE and ff. FF inserts blank text nodes in childnodes using Dom standards.
The node in FF does not have the removenode method. You must use the following method: node. parentnode. removechild (node)

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.