Summary on cross-browser compatibility between css and javascript

Summary on cross-browser compatibility between css and javascript

I. CSS style compatibility

1. FLOAT closure (clearing float)

In some browsers, the webpage is often displayed incorrectly because float is not actually closed, which is also one reason why div cannot adapt to the height. If the parent div does not have a float and its Child div has a float, the parent div cannot enclose the entire child DIV. This usually occurs when a parent DIV contains multiple child DIV. Solution:

1) set float to the parent DIV.

2) add an empty DIV after all sub-DIV (currently Ext does this), for example:

1 2 3 4 5 6 7 8 9

. Parent {width: 100px ;} . Son1 {float: left; width: 20px ;} . Son2 {float: left; width: 80px ;} . Clear {clear: both; margin: 0; parding0; height: 0px; font-size: 0px ;} <Div class = "parent"> <Div class = "son1"> </div> <Div class = "son2"> </div> <Div class = "clear"> </div> </Div>

3) Universal float Closure

Add the following code to Global CSS and add class = "clearfix" to the div to be closed.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<Style> /* Clear Fix */ . Clearfix: after { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; } . Clearfix { Display: inline-block; } /* Hide from IE Mac \*/ . Clearfix {display: block ;} /* End hide from IE Mac */ /* End of clearfix */ </Style>

: After (pseudo object), set the content after the object, usually used with content, IE does not support this pseudo object, not supported by Ie browsers, so it does not affect IE/WIN browsers. This is the most troublesome.

4) overflow: auto

You only need to add overflow: auto to the CSS of the parent DIV. Example:

1 2 3 4 5 6 7

. Parent {width: 100px; overflow: auto} . Son1 {float: left; width: 20px ;} . Son2 {float: left; width: 80px ;} <Div class = "parent"> <Div class = "son1"> </div> <Div class = "son2"> </div> </Div>

The principle is that the peripheral elements cannot be well extended. The problem lies in overflow because overflow is invisible (see W3C explanation ). Now, you only need to add an "overflow: auto" to the peripheral element to solve the problem. The result is that Internet Explorer can be used in addition to Internet Explorer. The problem of IE will be solved. The problem is completely solved by adding "_ height: 1%. I tried it. In fact, it does not apply "_ height: 1%" to IE. Keep it.

2. Cut word ellipsis

1 2 3 4 5 6

. Hh { -O-text-overflow: ellipsis; Text-overflow: ellipsis; White-space: nowrap; Overflow: hidden; }

This part of the text will be cut off and ended with a ellipsis. Technology is a good technology, and many people like to use it indiscriminately, but note that Firefox does not support it.

<Meta http-equiv = "x-ua-compatible" content = "ie = 7"/>

Add this sentence to the page to make the page compatible with IE7.

For reference! Notice a floating problem. Pay attention to setting DIV width and height. Set overflow: hidden. Pay attention to closing the display: inline-block style for Firefox parent div;

3. cursor: hand and cursor: pointer

Firefox does not support hand, But ie supports pointer
Solution: Use pointer

4. CSS transparency

Different browsers support different ways of transparency. To ensure that the transparency can be normally displayed in mainstream browsers such as IE, Firefox, Chrome, and Safari, we can define a class with transparency, because three write records are required, saving every copy to replicate.

The Code is as follows:

1 2 3 4 5

. Transparent { Filter: alpha (opacity = 60);/* supports IE browsers */ -Moz-opacity: 0.6;/* supports FireFox */ Opacity: 0.6;/* supports Chrome, Opera, Safari, and other browsers */ }

5.width and padding in CSS

In IE7 and FF, width does not include padding, and Ie6 includes padding.

Ii. JavaScript compatibility

1. children and childNodes

The behaviors of children, childNodes and childNodes in firefox provided by IE are different. In firefox, childNodes counts line breaks and blank characters as child nodes of the parent node, but IE's childNodes and children won't. For example:

<Div id = "dd">
<Div> yizhu2000 </div>
</Div>

Div with id dd can be viewed in childNodes in IE. The number of subnodes is 1, and the number of subnodes in ff is 3, we can see from the dom viewer of firefox that its childNodes is ["\ n", div, "\ n"].

To simulate the children attribute in firefox, we can do this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

If (typeof (HTMLElement )! = "Undefined "&&! Window. opera ){ HTMLElement. prototype. _ defineGetter _ ("children", function (){ For (var a = [], j = 0, n, I = 0; I <this. childNodes. length; I ++ ){ N = this. childNodes [I]; If (n. nodeType = 1 ){ A [j ++] = n; If (n. name ){ If (! A [n. name]) A [n. name] = []; A [n. name] [a [n. name]. length] = n; } If (n. id) A [n. id] = n; } } Return; }); }

2. firefox and ie events

Window. event can only be used in IE, but not in Firefox, because 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.

For example, the following method is used to obtain the mouse position under ie:

1 2 3 4 5 6

<Button onclick = "onClick ()"> obtain the abscissa of mouse clicks </button> <Script type = "text/javascript"> Function onclick (){ Alert (event. clientX ); } </Script>

Change

1 2 3 4 5 6 7

<Button onclick = "onClick (event)"> Get OuterHTML </button> <Script type = "text/javascript"> Function onclick (event ){ Event = event | window. event; Alert (event. clientX ); } </Script>

Can be used in two browsers

3. HTML object Acquisition Problems

Obtain document. getElementById ("idName") by using FireFox ")
Ie uses document. idname or document. getElementById ("idName ")
Solution: Use document. getElementById ("idName") in a unified manner ");

4. const Problems

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.

5. frame Problems

The following frame is used as an example:

<Frame src = "xxx.html" id = "frameId" name = "frameName"/>

A) access the frame object

IE: Use window. frameId or window. frameName to access this frame object. The 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;

B) 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), you can use parent in the frame to access the parent window. For example:

Parent.doc ument. form1.filename. value = "Aqing ";

6. body Problems

Firefox's body exists before the body tag is fully read by the browser, While IE's body must exist only after the body tag is fully read by the browser;

7. Differences between firefox and IE parent elements (parentElement)

IE: obj. parentElement

Firefox: obj. parentNode

Solution: because both firefox and IE support DOM, all use obj. parentNode.

8. innerText Problems

InnerText works normally in IE, but innerText does not work in FireFox. textContent is required;

Solution:

1 2 3 4 5

If (navigator. appName. indexOf ("Explorer")>-1 ){ Document. getElementById ('element'). innerText = "my text "; } Else { Document. getElementById ('element'). textContent = "my text "; }

9. Differences between AJAX and XMLHTTP

1 2 3 4 5 6

Var xmlhttp; If (window. XMLHttpRequest ){ Xmlhttp = new XMLHttpRequest (); } Elseif (window. ActiveXObject) {// method for obtaining IE Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP "); }

Note: In IE, the content of the xmlhttp. send (content) method can be empty, while firefox cannot be null. send ("") should be used; otherwise, error 411 may occur.