Browser compatibility issues solution · Summary

Popularity: Browser compatibility problems are often caused by different browsers (yes, different browsers) having different definitions of certain standards. As the saying goes: No IE, no harm.

Tip: the content is their own summary, unavoidable errors or bugs, welcome to correct and supplement, this post will be updated.

Normalize.css

There are differences in the default styles of different browsers. You can use normalize.css to smooth out these differences. Of course, you can also customize reset.css for your own business

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">Copy the code

Simple and crude method

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

html5shiv.js

Solve the following ie9 browser on HTML5 new tags do not recognize other issues.

<! -- [if lt IE 9] > < script type = "text/javascript" SRC = "https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > <! [endif]-->Copy the code

respond.js

The following Internet Explorer 9 browsers do not support CSS3 Media Query.

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>Copy the code

picturefill.js

Fix IE 9, 10, 11 and other browsers do not support the tag

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>Copy the code

IE conditional comment

Conditional comments in IE only apply to Internet Explorer and do not apply to other browsers

IE property filter (more commonly used hack method)

For different Internet Explorer browsers, you can use different characters to control the style of a specific version of Internet Explorer

Browser CSS compatible prefixes

-o-transform:rotate(7deg); // Opera -ms-transform:rotate(7deg); // IE -moz-transform:rotate(7deg); // Firefox -webkit-transform:rotate(7deg); // Chrome transform:rotate(7deg); // unified identity statementCopy the code

A Order of CSS states of labels

Many new people will wonder why the style of a tag has no effect, or click the hyperlink, hover, active style has no effect, in fact, just write style is overwritten.

The correct order of a labels should be: ==love hate==

Link: Normal status

3. After the visit, we visited the museum

Hover: when the mouse is placed over a link

Active: when the link is pressed

The perfect solution`Placeholder`

<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *'; }">Copy the code

Clear float best practices

.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }Copy the code

BFC solves margin overlap

When margin is set for adjacent elements, margin is set to the maximum value instead of the minimum value. To keep margins from overlapping, add a parent element to the child element and set the parent element to BFC: Overflow: hidden;

<div class="box" id="box">
  <p>Lorem ipsum dolor sit.</p>

  <div style="overflow: hidden;">
    <p>Lorem ipsum dolor sit.</p>
  </div>

  <p>Lorem ipsum dolor sit.</p>
</div>Copy the code

IE6 double margins problem

Set the float in IE6, and set the margin at the same time, there will be a double margin problem

display: inline;Copy the code

To solve`IE9`The following browsers are not available`opacity`

Opacity: 0.5; filter: alpha(opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);Copy the code

Internet Explorer 6 is not supported`fixed`Absolute positioning and the glitch in IE6 when absolutely positioned elements are scrolling

/* IE6 hack */
*html, *html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}
*html #menu {
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}Copy the code

IE6 background flicker problem

Problem: links and buttons use CSSsprites as background, in ie6 there will be background flicker phenomenon. The reason is that IE6 does not cache the background image and reloads it every time the hover is triggered

Solution: You can set ie6 to cache these images with JavaScript:

document.execCommand("BackgroundImageCache".false.true);Copy the code

In IE6, the list and date mismatch problem

The date tag precedes the title tag

To solve`IE6`Does not support`min-height`Problem with attributes

min-height: 350px;
_height: 350px;Copy the code

let`IE7 IE8`support`CSS3 background-size`attribute

Background-size polyfill is a new attribute added to CSS3, so it is not supported in IE versions. Use this file to enable IE7 and IE8 to support background-size properties. Insert an img element into the container and recalculate the width, height, left, and top values to simulate background-size.

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}Copy the code

IE6-7 `line-height`Failure problem

Problem: Line-height does not work when img is placed with text in IE

Solution: All set to float

`width:100%`

This is a handy thing to use in Internet Explorer, which will search up the width value layer by layer, ignoring floating layers.

Add width:100% to all floating layers in Firefox.

Opera learned its lesson and went with IE

`cursor:hand`

Display hand cursor: hand, IE6/7/8, Opera support, safari, FF do not support

cursor: pointer;Copy the code

Td wrap problem

Problem: table width fixed, TD automatic line wrap

Fix: Set Table to table-layout: fixed, TD to word-wrap: break-word

Let the layer display in`FLASH`On top of

To display the contents of the layer in Flash, make Flash transparent

1, the < param name =" wmode " value="transparent"/> 2, <param name="wmode" value="opaque"/>Copy the code

Keyboard events`keyCode`Compatibility writing

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}Copy the code

Find compatible writing method for window size

// The size of the viewable area of the browser window (excluding toolbars and scrollbars)
/ / 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// The actual width and height of the page content (including the sidebar and scrollbar)
/ / 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// The actual width and height of the page content (excluding toolbar and scrollbar edges)
/ / 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// Roll height
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;Copy the code

Compatible writing of DOM event handlers (capability detection)

Var eventshiv = {// event is compatible with getEvent:function(event) {
        return event ? event : window.event;
    },

    // typeCompatible getType:function(event) {
        returnevent.type; }, // target compatible with getTarget:function(event) {
        returnevent.target ? event.target : event.srcelem; }, // Add event handler addHandler:function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else{// in this case because. with'on'Strings cannot be linked, only [] elem['on' + type] = listener; }}, // Remove the event handler:function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null; }}, // Add event agent addAgent:function (elem, type, agent, listener) {
        elem.addEventListener(type.function (e) {
            if(e.target.matches(agent)) { listener.call(e.target, e); // this points to e.target}}); }, // cancel the default preventDefault:function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false; }}, // Stop events from bubblingstopPropagation:function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true; }}};Copy the code

Browser compatibility issues solution · Summary

Normalize.css

html5shiv.js

respond.js

picturefill.js

IE conditional comment

IE property filter (more commonly used hack method)

Browser CSS compatible prefixes

A Order of CSS states of labels

The perfect solutionPlaceholder

Clear float best practices

BFC solves margin overlap

IE6 double margins problem

To solveIE9The following browsers are not availableopacity

Internet Explorer 6 is not supportedfixedAbsolute positioning and the glitch in IE6 when absolutely positioned elements are scrolling

IE6 background flicker problem

In IE6, the list and date mismatch problem

To solveIE6Does not supportmin-heightProblem with attributes

letIE7 IE8supportCSS3 background-sizeattribute

IE6-7 line-heightFailure problem

width:100%

cursor:hand

Td wrap problem

Let the layer display inFLASHOn top of

Keyboard eventskeyCodeCompatibility writing