Browser compatibility issues

Browser compatibility Issue 1, Ajax XMLHttpRequest objects obtained under IE are:

Obtained by means of ActiveXObject ("Microsoft.XMLHTTP");
Example: var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");

The remaining methods of obtaining:

Obtained by means of XMLHttpRequest ();
Example var xmlhttp = new XMLHttpRequest ();

Compatible functions:

function getXMLhttpRequest() {    var xmlhttp = null;    if (document.all) {        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");    } else {        xmlhttp = new XMLHttpRequest();    }    return xmlhttp;}

2, the binding event under IE binding method is:

Using the Obj.attachevent () method;

The rest of the binding events are as follows:

Using the Obj.addeventlistener () method;

Thus, a compatible function can be written:

function setEvent(obj, eventname, functionname) {    if (document.all) {        return obj.attachEvent("on" + eventname, functionname);    } else {        return obj.addEventListener(eventname, functionname, false);    }}  

3, the event object obtains 4, the CSS style obtains under IE:

The method of using obj.currentstyle[attr];

Remaining methods of obtaining:

With getComputedStyle (obj, false) [attr];

Compatible functions:

    function getStyleTwo(obj, attr) {        return obj.currenStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];    }  

5, different browser tags default external patches and internal patches are different

Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.

Hit frequency: 100%

Solution: CSS * Note: This is the most common and the most easy to solve a browser compatibility problem, almost all of the CSS file starts with a wildcard * to set the internal and external patches of each tag is 0.

6, block attribute label float, and there is a wide margin in the case, in the IE6 show margin than set the large

Example code:

<div id="first"></div>  #first{            background-color: red;            width: 200px;            height: 200px;            float: left;            margin-left: 100px;        }  

In IE and the rest of the browser will have different effects;
Solution: In margin-left:100px, after adding display:inline;

7, set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond their own set height

Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings

Hit frequency: 60%

Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.
Example code:

   #first{            background-color: red;            width: 200px;            height: 10px;        }<div id="first"></div>  

Solution: Add Overflow:hidden to the style;

8, a few IMG tags together, some browsers will have the default spacing, add the problem one mentioned in the wildcard character also does not work.

Solution: Use the Float property for the IMG layout

Demo Code:

 .img{            background-color: red;            float: left;        }  

9, IE6 does not support fixed this thing, so we how to do it?

Solution: You can use the JS code to fix its position;

10, about the hand-shaped cursor. Cursor:pointer. And hand only applies to the double distance generated by ie.11, floating IE

Example code:

#box{ width: 200px;        height: 200px;            background-color: red;            float:left; width:100px; margin:0 0 0 100px;}<div id="box"></div>  

Solution: Solution: Display:inline---/make floating ignore

Ie7,ie8,firefox,chrome and other high-end browsers, can already recognize the!important attribute, but Ie6 is not

Demo Code:

  #colortest        {border:20px solid #60A179 !important;            border:20px solid #00F;            padding: 30px;            width : 300px;}<div id="colortest"></div>  

There's a new thing here. If IE can determine if the current browser is IE browser

Example code:

  <style type="text/css">        #colortest        {width: 100px;height: 100px;background-color: red}    </style>    <!--[if IE]>    <style type="text/css">        #colortest        {width: 100px;height: 100px;background-color: blue}    </style>    <![endif]--><div id="colortest"></div>

Browser compatibility issues