CSS and JavaScript cross-browser compatibility summary

First, CSS style compatibility

1. Float Closure (clearing float)

Web pages in some browsers display the dislocation is often because of the use of float and not really closed, this is a div can not adapt to the height of a reason. If the parent div is not set float and its child div is set to float, the parent Div cannot wrap the entire child Div, which generally appears under a parent div containing multiple child div. Solution:

1) to the parent Div also set float

2 after all the Sub div add a new empty div (currently ext is doing this), such as:

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 clas S= "Clear" ></div> </div>

3) Universal Float closure

Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.

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; cl Earfix {Display:inline-block}/* Hide from IE mac/* clearfix {Display:block}/* End hide from ie mac/* End of CL Earfix * * </style>

: After (pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. This is the most troublesome.

4) Overflow:auto

Just add Overflow:auto to the parent div's CSS. 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 outer element is not a good extension, the problem is on the overflow, because the overflow is not visible (see the interpretation of the consortium). Now as long as you will add a "overflow:auto" to the peripheral elements, you can solve the problem, the result is that in addition to IE, can really solve. Down to solve the problem of IE, coupled with the "_height:1%", the problem is completely resolved. I tried, in fact, do not add "_height:1%" in IE can also do, keep it.

2. Truncated ellipsis

1 2 3 4 5 6

. hh {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

This is to cut out the extra parts of the text after the length and end with an ellipsis. Technology is good technology, many people like to use, but the attention of Firefox does not support.

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

Page Plus this sentence will make the page compatible IE7

For reference! To remind you of a floating need to pay attention to the problem of setting div width and high attention setting overflow:hidden; Note that the display:inline-block is closed for Firefox's parent div style;

3. Cursor:hand and Cursor:pointer

Firefox does not support hand, but IE supports pointer
Workaround: Unify the use of pointer

4. CSS Transparent

Several browsers to the transparency of the support methods are different, in order to ensure that in IE, Firefox, Chrome, Safari and other mainstream browsers can display the effect of transparency, we can define a transparency class, because a write will write 3, the province of each copy to copy.

The specific code is as follows:

1 2 3 4 5

. transparent{Filter:alpha (OPACITY=60);/* Support IE Browser/-moz-opacity:0.6;/* Support FireFox Browser/opacity:0.6; * Support Chrome, Opera , Safari and other browsers *}

Width and padding in 5.css

Width widths in IE7 and FF do not include padding, including padding in Ie6.

Second, JavaScript compatible

1. Children and ChildNodes

IE provided by the children, ChildNodes and Firefox under the childnodes behavior is different, Firefox under ChildNodes will be line and white space characters are counted as the parent node of the child node, And the childnodes and children of IE will not. Like what:

<div id= "DD" >
<div>yizhu2000</div>
</div>

The div with ID dd is viewed with childnodes under IE, its child nodes are 1, and FF is three, we can see from Firefox's Dom viewer that his childnodes is ["N", Div, "n"].

To simulate the properties of children under Firefox we can do this:

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; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP}         if (N.id)          a[n.id] = n; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP}     }     return A;   }); }

1 2 3 4 5 6 7 8 9 a

2. Firefox and IE events

Window.event can only be used under IE, but not in Firefox, because Firefox event can only be used on the spot where events occur. Firefox must add an event as a parameter pass from the source. IE ignores this parameter and uses window.event to read the event.

Let's say this is the way to get the mouse position under IE:

1 2 3 4 5 6

<button onclick= "onclick ()" > get mouse click Horizontal coordinate </button> <script type= "Text/javascript" > Function onclick () {alert (EVENT.CLIENTX);} </script>

Need to be changed into

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>

To use in both browsers

3.HTML Object Acquisition Problem

Firefox access mode document.getElementById ("Idname")
ie use document.idname or document.getElementById ("Idname")
Solution: Unified Use of document.getElementById ("Idname");

4. The question of the const

Under Firefox, you can use the Const keyword or the var keyword to define constants;
ie, only the var keyword can be used to define constants;
Workaround: Use the var keyword uniformly to define constants.

5.frame problem

Take the following frame as an example:

<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>

A) access to 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 use Window.framename to access this frame object;
In addition, in IE and Firefox can use Window.document.getElementById ("Frameid") to access this frame object;

B Switch Frame contents

Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = " Xxx.html "to toggle the contents of the frame;

If you need to pass parameters in a frame back 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.document.form1.filename.value= "Aqing";

6. Body Problem

The body of the Firefox body tag is not fully read by the browser before the presence of the body of IE must be in the body tag is fully read into the browser after the existence;

7. The difference between Firefox and IE's parent element (parentelement)

IE:obj.parentElement

Firefox:obj.parentNode

Workaround: Because both Firefox and IE support DOM, all use Obj.parentnode

8.innerText problem

InnerText in IE can work, but innertext in Firefox but not, needs textcontent;

Workaround:

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.AJAX get the difference of XMLHTTP

1 2 3 4 5 6

var xmlhttp; if (window. XMLHttpRequest) {xmlhttp = new XMLHttpRequest ();} elseif (window. ActiveXObject) {//IE acquisition mode XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");}

Note: In IE, the content of the Xmlhttp.send (content) method can be empty, and Firefox is not NULL, you should use Send (""), or there will be 411 errors.