Recommended cross-browser compatibility summary for cattle people

Cross-browser compatibility summary recommended by cattle [copy link]

Send a short message
UID2427 Essence 4 points 239 share 12442 Prestige 1285 View Public Information search topics search posts Spirit Rain wandering

Technical Director

Group Admin Birthday Post 470 Essentials 4 points 239 shares 12442 Prestige 1285 online time 28275 registration time 2013-11-24 # font size: T t posted in 2013-12-26 08:27 | only see the landlord
One, CSS style compatible

1. Float Closure (clearing float)

Web pages appear to be misaligned on some browsers many times because of the use of float instead of really closed, which is one reason the div cannot adapt to height. If the parent div is not set to float and its sub-div is set to float, the parent Div cannot wrap the entire sub-div, which typically appears under a parent div with multiple sub-div. Workaround:

1) Set the parent div to float

2) Add an empty div after all sub-div (currently ext is doing so), for example:. 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>

Copy Code 3) Universal float closure

Add the following code to the global CSS and add class= "Clearfix" to the div that needs to be closed. <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>

Copy code: After (Pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-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 to get it done. Example:. 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 of copy code is that the peripheral elements do not extend well, the problem lies in the overflow, because overflow is not visible (see the explanation of the world). Now just add a "overflow:auto" to the peripheral elements, you can solve the problem, the result is in addition to IE, can really solve. Come down to solve the problem of IE, plus "_height:1%", this problem is completely solved. I tried, actually do not add "_height:1%" under IE also line, keep it.

2. Truncation ellipsis. hh {

-o-text-overflow:ellipsis;

Text-overflow:ellipsis;

White-space:nowrap;

Overflow:hidden;

}

Copy the code this is the longer the length of the text will be self-cutting off the extra parts, and end with an ellipsis. Technology is good technology, many people like to mess with, but note that Firefox does not support.
<meta http-equiv= "x-ua-compatible" content= "ie=7"/>
Page Plus this sentence can make the page compatible IE7
For reference! To remind you of a floating need to be aware of the problem note setting the div width and high note setting Overflow:hidden; Note Closed for Firefox parent div style display:inline-block;

3. Cursor:hand and Cursor:pointer

Firefox does not support hand, but IE supports pointer
Workaround: Use pointer uniformly

4. CSS Transparency

Several browsers support the transparency of different ways, in order to ensure that in IE, Firefox, Chrome, Safari and other mainstream browser can display the effect of transparency, we can define a transparent class, because the write will write 3, save each copy to copy.
The specific code is as follows: Width and padding in 5.css

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

Second, JavaScript compatible

1. Children and ChildNodes

IE provides children, ChildNodes and Firefox under the childnodes behavior is different, Firefox childnodes will wrap and white space characters are counted as child nodes of the parent node, and IE's childnodes and children will not. Like what:

<div id= "DD" >

<div>yizhu2000</div>

</div>

Copy Code ID dd div under IE with childnodes view, its number of child nodes is 1, and FF is three, we can see from the Firefox Dom viewer of his childnodes for ["\ 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;

}

if (n.id)

A[n.id] = n;

}

}

return A;

});

}

Copy Code
2. Firefox and IE events

Window.event can only be used under IE, but not in Firefox, because the Firefox event can only be used at the site where events occur. Firefox must add an event from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.
Let's say the following is the way to get the mouse position under IE:

<button > Get mouse click Horizontal axis </button>

<script type= "Text/javascript" >

function onclick () {

alert (EVENT.CLIENTX);

}

</script>

Copy code needs to be changed to <button onclick= "onclick" > Get outerhtml</button>

<script type= "Text/javascript" >

function onclick (event) {

Event = Event | | window.event;

alert (EVENT.CLIENTX);

}

</script>

Copy code to use in two browsers

3.HTML Object Acquisition Issues

Firefox get mode document.getElementById ("Idname")
IE uses document.idname or document.getElementById ("Idname")
Solution: Uniform Use of document.getElementById ("Idname");

4. Const ISSUES

Under Firefox, constants can be defined using the Const keyword or the var keyword;
Under IE, you can only use the var keyword 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) accessing the frame object
IE: Use Window.frameid or window.framename to access the frame object, Frameid and FrameName can have the same name;
Firefox: Only use Window.framename to access the frame object;
In addition, in IE and Firefox can use Window.document.getElementById ("Frameid") to access the frame object;

b) Toggle Frame content
You can use Window.document.getElementById ("Testframe") in both IE and Firefox. src = "xxx.html" or window.frameName.location = " xxx.html "To switch the contents of the frame;
If you need to pass the arguments in the 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 Firefox exists before the body tag is fully read by the browser, while the body of IE must be fully read into the body tag before it is available;

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 normally, but innertext in Firefox but not, need to textcontent;
Workaround: if (navigator.appName.indexOf ("explorer") >-1) {

document.getElementById (' element '). InnerText = "my text";

} else {

document.getElementById (' element '). Textcontent = "my text";

}

Copy Code
9.AJAX get the difference between XMLHTTP

var xmlhttp;

if (window. XMLHttpRequest) {

XMLHTTP = new XMLHttpRequest ();

} elseif (window. ActiveXObject) {//IE acquisition method

XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");

}

Copy code note: In IE, the content of the Xmlhttp.send (content) method can be empty, and Firefox cannot be null, should use Send (""), or there will be a 411 error.

Recommended cross-browser compatibility summary for cattle people