There are many different types of browsers on the market today, and different types of browsers have different kernels, so different browsers parse the code differently, which leads to the problem of inconsistent page rendering.

There are four common browser kernels in the market: Webkit kernel, Presto kernel, Trident kernel and Gecko kernel.

Common browser compatibility can be divided into three categories: ①HTML compatibility ②CSS compatibility ③JavaScript compatibility

HTML compatible

HTML compatibility issues mainly involve different browsers can recognize different tags, some advanced tags can not be used in low-level browsers, but our general layout is still div+ CSS +input, this kind of problem will rarely occur

— This article for reference online content, not pure original —

Css compatibility

1. Browser compatibility problem 1: The default margin and padding of tags in different browsers are different

{ 
    margin:0; padding:0; 
}
Copy the code

2. Browser compatibility problem 2: Margin value becomes double after element float in IE6

{
  display: inline;
}
Copy the code

3. Browser compatibility problem 3: The minimum label height is incompatible with min-height

{ min-height: 200px; height: auto! important; height: 200px; overflow: visible; }Copy the code

4. Browser compatibility problem 4: In IE6, image elements IMG have spacing by default

img{
  float:left;
}
Copy the code

Opacity is a cSS3 property that is only compatible with some browsers

{
    // Use the private properties of each browser to support opacity
  filter: alpha(opacity=50);/*IE*/
  -moz-opacity: 0.5;/ * original Mozilla * /
  -khtml-opacity: 0.5;/ * original Safari * / 
  opacity: 0.5;
}
Copy the code

6. Browser compatibility problem 6: In IE6, image elements IMG have spacing by default

img{
  float:left;
}
Copy the code

7. Browser compatibility Problem 7: Clear floating

.clearfix::after {
         content: "";
        display: table;
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
Copy the code

8. Browser compatibility problem # 8: Setting margin and padding values in addition to height and width of an element changes the actual size of the element.

// The div that needs to be resolved
<div style="margin:1; padding:1; width:10; height:10;"></div>
Copy the code
// The solution
<div style="width:10; height:10;">
    <div style="margin:1; padding:1;"></div>
</div>
Copy the code

Overflow: Auto; + position: relative

This bug only appears in IE6 and IE7. There are two block-level elements, and the parent element sets Overflow: auto; The child element sets position:relative; In IE6-7, the neutron element is not hidden but overflows.

Set position:relative to the parent element as well;

// The div that needs to be resolved
<div style="overflow:auto;">
    <div style="position:relative"></div>
</div>
Copy the code
// The solution
<div style="overflow:auto; position:relative">
    <div style="position:relative"></div>
</div>
Copy the code

10. Zoom in and out of IE images

Description: Picture scaling in IE sometimes affects its quality

Solution:

img{ -mg-interpolation-mode:bicubic; }Copy the code

11. PNG image transparency bug in IE6

Description: Using transparent images, using PNG24 or PNG32 images under IE6 will have a light blue background.

Solution:

.img{

background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');

_background:0;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');

}

img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale'); } or < imgsrc ="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png ',sizingMethod='scale');" alt="" />
Copy the code

12.<iframe>Transparent background bug

Description: In Internet Explorer, the

Solution:

<iframesrc="content.html"allowTransparency="true"></iframe>
Copy the code

Set in the content.html page of the iframe call

body{background-color: transparent; }Copy the code

13. Disable the default vertical scroll bar of Internet Explorer

Solution:

html{
    overflow:auto;
}
Copy the code

14. Dislocation of floating layer

Description: Floating layer misalignment problems occur when content exceeds the width defined by the outsourcing container. In Firefox, IE7, IE8, and other standard browsers, the excess is just over the edge; In IE6, however, the container ignores the defined width value and mistakenly increases the width of the content. If this floating element is followed by a floating element, it can cause a dislocation problem.

Solution:

Overflow: hidden;Copy the code

15.IE8 below does not support HTML5 semantic tags

<! The following version of IE8 does not support html5 semantic tags.<header>I'm the header tag, and I should own the entire line</header>
Copy the code

Solution: HTML5shiv resolves compatibility issues

The html5shiv plug-in package in head can solve the problem that IE 8 does not recognize HTML5 semantic tags

<script src="html5shiv.js"></script>
Copy the code

Actual operation:

In IE9, it is a normal comment. It is not parsed:<! - [if lte IE 8] ><script>
      alert("Less than or equal to IE8.");
    </script>
    <script src="html5shiv.js"></script><! [endif]-->Conditional comments are used as comments in IE 10 and above<! - [if gt IE 8] ><script>
      alert("Only IE9 executes this sentence");
   </script><! [endif]-->Copy the code

Js compatible

Best way: Use jquery across browsers!!

In addition, several common native JS compatibility issues are provided

1. getElementsByName()

In IE and Opera, the getElementsByName() method also returns elements whose IDS are specified values.

2. Document. GetElementsByClassName (' the name of the class)

Internet explorer 9 + support

3. Document. querySelector(' selector ');

Internet explorer 8 + support

4. The innerText and innerHTML

InnerHTML is a non-standard attribute (not the W3C standard), but all browsers support it. (The W3C standard is covered in other articles.)

The innerText property has compatibility issues and was not supported in earlier Versions of Firefox, using textContent instead

5. FirstElementChild and lastElementChildGets the first and last node of the child element

Internet explorer 9 + support

Solution: children(0) returns the first

6. AddEventListener () Supported by IE9

IE9 uses attchEvent() instead

7. Internet Explorer 6, 7, and 8 cannot obtain the compatible writing method of the event object

    box.onclick = function (e) {
            // IE 6\7\8 gets the event object using window.event
            e = e || window.event;
    }
Copy the code

8. Stop the event from bubbling

E.toppropagation () Does not support IE 6\7\8

IE8 uses e.canelbubble = true for the following;

    if (e && e.stopPropagation) {
	e.stopPropagation
} else {
	window.event.cancelBubble = true;
}
Copy the code