) No harm without IE! Summary of browser compatibility solutions, ie Solutions

(Switch) No harm without IE! Summary of browser compatibility solutions, ie Solutions

Popularity: The compatibility of browsers is often caused by inconsistent definitions of some standards in some browsers (that is, the unique browser. As the saying goes: Without IE, there will be no harm.

Tips: The content is summarized by yourself. errors or bugs may inevitably occur. You are welcome to correct and supplement the content. This post will be updated continuously.

Normalize.css

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

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

Simple Brute Force

* { margin: 0; padding: 0; }

Html5shiv. js

Solve the problem that the browsers below ie9 do not recognize tags added to html5.

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

Respond. js

Solve the problem that browsers under ie9 do not support CSS3 Media Query.

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

Picturefill. js

Solve the problem that browsers such as IE 9 10 11 do not support the <picture> label.

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

IE condition Annotation

The IE condition annotation is only for IE browsers and is invalid for other browsers.

 

IE attribute filter (Common hack method)

For different IE browsers, you can use different characters to control the style of IE browsers of specific versions.

Image

Browser CSS compatible prefix

-O-transform: rotate (7deg); // Opera-ms-transform: rotate (7deg); // IE-moz-transform: rotate (7deg ); // Firefox-webkit-transform: rotate (7deg); // Chrome transform: rotate (7deg); // uniform identification statement

Sequence of several CSS states of a tag

Many new users may wonder why the style they write has no effect when writing the tag, or after clicking the hyperlink, the hover and active styles have no effect, but the style they write is actually overwritten.

The correct a tag sequence should be:

Link: normal status visited: hover after access: active when the mouse is placed on the link: when the link is pressed

Perfect solution for Placeholder

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

Best practices for clearing float

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

BFC solves the padding overlap problem

When the margin of the adjacent elements is set, margin takes the maximum value and discards the small value. To avoid margin overlap, you can 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 "overflow: hidden;"> <p>Lorem ipsum dolor sit.</p> </div> <p>Lorem ipsum dolor sit.</p> </div>

IE6 double margin

Setting floating in ie6 and margin at the same time will cause the double margin problem.

display: inline;

Opacity cannot be used in browsers earlier than IE9

opacity: 0.5; filter: alpha(opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50);

Solve the problem that IE6 does not support fixed absolute positioning, and the elements that are absolutely positioned under IE6 will flash during 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'); }

Internet Explorer 6 background flickering

Problem: the link and button use CSSsprites as the background. The background image flashes in ie6. The reason is that IE6 does not cache the background image and will re-load each time hover is triggered.

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

document.execCommand("BackgroundImageCache", false, true);

Solve the Problem of incorrect list and date in IE6

The date <span> label is placed before the title <a> label.

 

Solve the problem that IE6 does not support the min-height attribute.

min-height: 350px; _height: 350px;

Enable IE7 IE8 to support the CSS3 background-size attribute

Because background-size is a new property of CSS3, it is not supported by earlier IE versions. However, a foreigner writes an htc file named background-size polyfill, this file allows IE7 and IE8 to support the background-size attribute. The principle is to create an img element and insert it into the container, and recalculate the width, height, left, and top values to simulate the background-size effect.

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'); }

IE6-7 line-height failure problem

Problem: line-height does not work when img and text are put together in ie

Solution: Set all to float.

 

Width: 100%

Width: 100% this is very convenient to use in ie. It will search for the width value layer up, ignoring the influence of floating layer.

Search for the floating layer in Firefox ends. In this way, you can only add width: 100% to all floating layers in the middle. Tired.

Opera is a good expert.

Cursor: hand

Display hand-type cursor: hand, ie6/7/8, and opera are supported, but safari and ff are not supported.

Cursor: pointer;

Automatic line feed of td

Problem: fixed table width and line feed automatically on td

Solution: set Table to table-layout: fixed, and td to word-wrap: break-word.

Display layers on FLASH

To display the content of the layer on flash, set the FLASH to transparent.

1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>

Key code compatibility of Keyboard Events

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) }

Compatibility of window size

// The visible area size of the browser window (excluding the toolbar and the scroll bar) // 1600 * 525var client_w = document.doc umentElement. clientWidth | document. body. clientWidth; var client_h = document.doc umentElement. clientHeight | document. body. clientHeight; // The actual width and height of the webpage content (including the same side of the toolbar and scroll bar) // 1600 * 8var scroll_w = document.doc umentElement. scrollWidth | document. body. scrollWidth; var scroll_h = document.doc umentElement. scrollHeight | document. body. scrollHeight; // The actual width and height of the webpage content (excluding the toolbar and the scroll bar) // 1600 * 8var offset_w = document.doc umentElement. offsetWidth | document. body. offsetWidth; var offset_h = document.doc umentElement. offsetHeight | document. body. offsetHeight; // The scrolling height var scroll_Top = document.doc umentElement. scrollTop | document. body. scrollTop;

Compatible Writing of DOM event handler (capability detection)

Var eventshiv = {// event compatible with getEvent: function (event) {return event? Event: window. event;}, // type compatible with getType: function (event) {return event. type ;}, // target is compatible with getTarget: function (event) {return event.tar get? Event.tar get: event. srcelem;}, // Add event handle addHandler: function (elem, type, listener) {if (elem. addEventListener) {elem. addEventListener (type, listener, false);} else if (elem. attachEvent) {elem. attachEvent ('on' + type, listener);} else {// here because. cannot be linked to the 'on' string. You can only use [] elem ['on' + type] = listener;}, // remove the event handle removeHandler: 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 proxy addAgent: function (elem, type, agent, listener) {elem. addEventListener (type, function (e) {if (e.tar get. matches (agent) {listener.call(e.tar get, e); // this points to e.tar get}) ;}, // cancel the default behavior preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, // block event bubbling stopPropagation: function (event) {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}};