Cross-browser web Summary

Since the web era, web page development has become richer and more vivid. For Web developers, browser compatibility has become a nightmare in the coding process. It is not only compatible with IE and Firefox vendors, but also the compatibility of different browsers in IE6/7/8. Even if IE8 is closer to W3C, everyone begins to follow the common CSS standard, and there are compatibility issues with different JS versions (now ECMA is responsible for developing JS syntax and extension ). In addition, even if there is no big difference between CSS and JS, don't forget that JavaScript is used in a lot of development, not the language itself, but the DOM model operation of the browser, that is, the properties and supported methods of window/document/table/Div/iframe objects cannot be unified between browsers. So here I want to talk about cross-browser compatible development for all web developers ......

 

Here we will summarize some cross-browser experiences and skills, and will continue to collect, summarize, and share them --

1. Set the float attribute in CSS
Because float is a reserved word of JavaScript, the float attribute cannot be used directly.
The syntax of IE is document. getelementbyid ('Demo'). style. stylefloat = 'left ';
The statement of ffis document.getelementbyid('demo' ).style.css float = 'left ';

 

2. Perform compute style operations
Computer style refers to CSS attributes that are not embedded in HTML code that are introduced in external mode.
The syntax of IE is obj. currentstyle. backgroundcolor = 'red ';
The syntax of FF is document. defaultview. getcomputedstyle (OBJ, null). backgroundcolor = 'red ';

 

3. Get the CSS Class Name
The syntax of IE is obj. classname = 'mystyle'; (or use getattribute)
The syntax of FF is obj. Class = 'mystyle ';

 

4. For attributes of label labels
The syntax of IE is obj. getattribute ('htmlfor ');
The syntax of FF is obj. getattribute ('for ');

 

5. Mouse position coordinates
The syntax of IE is event. clientx and event. clienty;
The FF syntax is event. pagex and event. Pagey;

 

6. Obtain the browser window size
The syntax of ieis document.documentelement.clientwidthand document.doc umentelement. clientheight;
The FF syntax is window. innerwidth and window. innerheight;

 

7. Set the Alpha transparency Value
The syntax of IE is obj. style. Filter = 'Alpha (opacity = 80 )'
The syntax of FF is obj. style. Opacity = '0. 5 ';

8. js collection Class Object Problems
Note: 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.

 

9. Custom Attributes
Note: 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 () to obtain custom attributes.
Solution: getattribute () is used to obtain custom attributes.

 

10. js eval ("idname") Problems

Note: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML pair whose ID is idname.
In Firefox, only getelementbyid ("idname") can be used to obtain the HTML object whose ID is idname.
Solution: getelementbyid ("idname") is used to retrieve the HTML object whose ID is idname.

 

11. The JS variable name is the same as the ID of an HTML object.
Note: In ie, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; in Firefox, it cannot be in. Firefox,
You can use the same variable name as the HTML Object ID, but not in IE.
Solution: Use document. getelementbyid ("idname") instead of document. idname.
Use the same variable name to reduce errors. When declaring variables, add VaR to avoid ambiguity.

 

12. js const Problems
Note: 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.

 

13. Question about the input. Type attribute
Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.

 

14. Window. Event Problems
Note: window. event can only be run in IE, but not in Firefox. This is because Firefox Event can only occur in events.
Site use.

 

15. event. X and event. Y
Note: 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 there is no X or Y attribute.
Solution: Use MX (MX = event. X? Event. X: event. pagex;) to replace event. X in IE or
Event. pagex.

 

16. event. srcelement Problems

Note: 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,
No srcelement attribute.
Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.tar get;) to replace

 

17. Window. Location. href
Note: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x, you can only use
Use window. location.
Solution: Use window. location to replace window. Location. href.

 

18. Modal and non-modal window Problems
Note: in IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows; in Firefox, no.
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass 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.

 

19. Frame Problems
(1)-access frame object:
IE: Use window. frameid or window. framename to access this frame object.
Firefox: only window. framename can be used to access this frame object.
In addition, both ieand firefoxcan access this frame by using the upload metadata Doc ument. getelementbyid ("frameid ").
Object.
(2)-switch frame content:
In ieand firefox, you can use javasecondoc ument. getelementbyid ("testframe"). src = "xxx.html" or
Window. framename. Location = "xxx.html" to switch the frame content.
If you want to return parameters in the frame to the parent window, you can use parent in frme to access the parent window. For example:
Parent.doc ument. form1.filename. value = "aqing ";

 

20. Body Problems
Firefox's body exists before the body tag is fully read by the browser, While IE's body must be destroyed when the body tag is
The. event Delegate method exists only after the browser is fully read.
IE: Document. Body. onload = inject;

Firefox: Document. Body. onload = inject ();
Some people say the standard is: Document. Body. onload = new function ('inject ()');

 

21. Differences between Firefox and IE (parentelement) parent Elements
IE: obj. parentelement
Firefox: obj. parentnode
Solution: because both Firefox and IE support DOM, using obj. parentnode is a good choice.

 

22. innertext works normally in IE, but innertext does not work in Firefox.
Solution:
If (navigator. appname. indexof ("Explorer")>-1)
Document. getelementbyid ('element'). innertext = "My text ";
Else
Document. getelementbyid ('element'). textcontent = "My text ";

 

23. The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.
Solution: obj. style. Height = imgobj. height + 'px ';

 

24. The operations on table labels vary with IE, Firefox, and other browsers. in IE, innerhtml of table and TR is not allowed.
Assign values. When adding a Tr using JS, The appendchile method is not used.
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 );

 

25. 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;

When the indentation of UL and ol lists is eliminated
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.

26. 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 ;.

 

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

 

28. line feed layout problems

Force do not wrap Div {white-space: nowrap ;}
Automatic line feed Div {word-wrap: Break-word; Word-break: normal ;}
Force an English word to break the DIV {word-break: Break-all ;}