Issues related to CSS and JS compatibility with different browsers

First, let's talk about the browser. Although IE is still the leader in the browser market, it accounts for about 67% of its share, but due to its lack of expertise in all aspects, users start to select other browsers as their main tools for web page browsing, such as Firefox, theworld, Maxthon, chrome, and opera, there are two main factions: IE kernel and non-ie kernel. For example, theworld, Maxthon, and greenbrower all belong to IE kernel, while Firefox, chrome, and opera are not ie kernel, many browsers make our web Program There is a compatibility problem. For example, ie has the following options: IE 6, IE7, and IE8. style control and JS scripts also have different effects in different ie versions, even Bugs, not to mention Firefox, chrome, and opera in non-ie kernels. From the market share analysis, ie is still the leading browser market and will be difficult to change for a long time. However, we cannot ignore the rapid growth of Firefox and other browser browsers, in the future, we cannot estimate that many junior users have not yet seen the advantages of other non-ie kernels. When they find out, is it too late for us to meet their needs, therefore, we must be compatible with multiple browsers. Currently, most web developers in the market choose to be compatible with IE7 and Firefox, which are currently the most widely used by users. Well, we will focus on compatibility with these two browsers.

Many browsers make us face the embarrassment of testing a variety of browsers. For example, ie can only install one version on one machine. We need to test the Display Effect of the program in three versions of IE, it will be very cumbersome to test the three versions of machines separately. Here we recommend a tool, ietester can test the IE program of the three versions at the same time, very good. Other browsers can be installed on the same machine, so we have prepared the test environment.

Firefox is a browser with rich plug-ins. Here I recommend three necessary development tools for Web developers-firebug, web developer, and IE tab.
Firebug is a development plug-in under Firefox, and is now one of Firefox's five-star powerful recommendation plug-ins. It integrates HTML viewing and editing, the Javascript console, and the network condition monitor. It is a powerful assistant for developing JavaScript, CSS, HTML, and Ajax. Firebug is like a Swiss Army knife. It analyzes the details of the web page from different perspectives, bringing great convenience to Web developers.
The Web Developer plug-in provides some practical tools for webpage (x) HTML, scripts, multimedia, CSS, caching, and images in the form of a toolbar. So that we can easily obtain more information about the web page, so that we can further understand the current web page.
IE tab is a plug-in for Firefox to switch between Firefox and IE, so that developers can easily view the compatibility of mainstream browsers in 2 with one click.
Use the above three tools to search for keywords in Google and Baidu.
Debugbar is a tool similar to firebug in IE, but the function is far from enough, but we recommend it here.

Firefox supports W3C standards and is currently the best browser for CSS support, while IE has appeared earlier and is not doing well in W3C support, therefore, the two browsers are different in many aspects.
The following describes the compatibility of the two browsers:
1. 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.

2. HTML object Acquisition Problems
Firefox: Document. getelementbyid ("idname ");
IE: Document. idname or document. getelementbyid ("idname ").
Solution: Use document. getelementbyid ("idname") in a unified manner ");

3. Const Problems
Note: In Firefox, you can use the const keyword or var keyword to define constants;
In IE, constants can only be defined using the VaR keyword.
Solution: Use the VaR keyword to define constants.

4. Window. Event Problems
Note: window. the event can only run in IE, but not in Firefox, because the Firefox Event can only be used in the event. firefox must be added to the source for parameter transfer. IE ignores this parameter and uses window. event to read this event.
Solution:
IE & Firefox:
Submitted (event) "/>...
<Script language = "JavaScript">
Function submitted (EVT ){
EVT = EVT? EVT :( window. event? Window. Event: NULL );
}
</SCRIPT>

5. 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 does not have the X and Y attributes.
Solution: Use MX (MX = event. X? Event. X: event. pagex;) to replace event. X in IE or event. pagex in Firefox.

6. event. srcelement Problems
Note: In ie, the event 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 OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under event.srcelement?firefox. pay attention to the compatibility of event.

7. Window. Location. href
Note: in IE or firefox2.0.x, you can use window. Location or window. Location. href;
Only window. location.
Solution: Use window. location to replace window. Location. href.

8. 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.
For example, VAR parwin = Window. opener; parwin.doc ument. getelementbyid ("aqing"). value = "aqing ";

9. Frame 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. frameid and framename can have the same name.
Firefox: only window. framename can be used to access this frame object.
In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyid ("frameid.

(2) Switch frame content:
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content.
If you need to return the parameters in the frame to the parent window (note that it is not opener but parent frame), you can use parent in the frame to access the parent window. Example: parent.doc ument. form1.filename. value = "aqing ";

10. Body Problems
The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.

11. Event delegation Method
IE: Document. Body. onload = inject; // function inject () has been implemented before this
Firefox: Document. Body. onload = inject ();

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

13. cursor: hand vs cursor: pointer
Firefox does not support hand, But ie supports pointer
Solution: Use Pointer

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

15. When setting the style of HTML tags in Firefox, the values of all positional and font sizes must be followed by PX. This IE is also supported.

16. The 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 );

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

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

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

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

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

22. operations on the Select Options set
Apart from [], selectname. options. item () is also acceptable, and selectname. options. length, selectname. options. add/Remove can be used in both browsers. Note that the element is assigned after "add", otherwise it will fail.

23. Differences between XMLHTTP
// MF
If (window. XMLHttpRequest) // MF
{
XMLHTTP = new XMLHttpRequest ()
XMLHTTP. onreadystatechange = xmlhttpchange
XMLHTTP. Open ("get", URL, true)
XMLHTTP. Send (null)
}
// IE
Else if (window. activexobject) // code for IE
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ")
If (XMLHTTP)
{
XMLHTTP. onreadystatechange = xmlhttpchange
XMLHTTP. Open ("get", URL, true)
XMLHTTP. Send ()
}
}
}

Width and padding in 24.css
In IE7 and FF, width does not include padding, and IE6 includes padding.

25. CSS hack
Depending on the degree of support of different browsers for CSS styles, the resolution result and the priority for recognizing CSS are different, designers can write different CSS styles based on the characteristics of these different browsers.Code. IE6 can recognize underscores (_) and asterisk (*). IE7 can recognize asterisks (*) and cannot recognize underscores (_). Firefox cannot recognize both of them, you can write different codes for ie6.ie7 and FF by using these special symbols.

<Style>
Div {
Background: green;/* For Firefox */
* Background: red;/* For IE7 */
_ Background: Blue;/* For IE6 */
}
</Style>

This style is displayed as follows: In Firefox, the background color is green; In IE7, the background color is red; in IE6, the background color is blue.

In addition ,! The important declaration can also improve the application priority of a specified style rule. Used in IE6 and FF! Important declaration can improve the priority level, but in IE6! The important declaration will be replaced by the subsequent attributes with the same name. So, pass * and! Important declares that the combination of the two can also solve the compatibility problem between IE6, IE7 and ff.

Difference ff, IE7, IE6: Background: red; * Background: Green! Important; * Background: blue;

Note: IE can recognize *; FF cannot recognize *; IE6 can recognize *, but cannot recognize! Important; IE7 can recognize * and can also recognize! Important; FF cannot recognize *, but can recognize it! Important;

For IE7/Firefox, add [xmlns] to the front of CSS. For the left attribute below, if I want to work only for IE7/Firefox, write as follows:
[Xmlns] # Left {
Float: left;
Border: 4px solid #999;
Padding: 5px;
Width: 200px;
Height: 200px;
}
For IE6 only, you can add * HTML in front of CSS, for example:
* Html # Left {
Clear: both;
}

It only works for IE7. Add * + HTML in front of CSS, for example:
* + Html # Left {
Clear: both;
}

The order of writing is in front of Firefox, in the middle of IE7, and in the end of IE6.

26. Use ie-specific condition annotations

<! -- Other browsers -->
<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>

<! -- [If IE 7]>
<! -- Suitable for IE7 -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
<! [Endif] -->

<! -- [If lte ie 6]>
<! -- Suitable for IE6 and later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->

27. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

28. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

29. FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

30. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows: div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

31. The box interpretations of ie5 and IE6 are inconsistent.
Div {width: 300px; margin: 0 10px 0 10px;} under ie5 ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can modify Div {width: 300px as follows! Important; width/**/: 340px; margin: 0 10px 0 10px}

For JavaScript and CSS compatibility issues, first write it here, and then continue to update.