IE8及以下浏览器无法识别新标签和新属性，导致页面展示不对，解决方法如下：
一、非媒体标签（如<video><audio>等）：
通过<script>标签引入官方出的JS文件即可（html5shiv.js文件代码附最后）
代码：
<script src="./html5shiv.js"></script>
为了避免非IE8 以下都加载此资源，浪费请求，可以写只有ie8 以下才认识的注释：
<head>
<meta charset="UTF8">
<title>document</title>
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>
注释解释：
如果 小于< ie9 ，则执行JS标签引入html5shiv.js 文件，判断结束
这样的话，只有ie8以下才能在注释内识别到，再加载这个兼容性文件了
html5shiv.js文件在下方
/*! HTML5 Shiv v3.6.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
(function (window, document) {
/*jshint evil:true */
/** Preset options */
var options = window.html5 || {}
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i
/** Not all elements can be cloned in IE **/
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles
/** Name of the expando, to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv'
/** The id for the the documents expando */
var expanID = 0
/** Cached data for each document */
var expandoData = {}
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function () {
try {
var a = document.createElement('a')
a.innerHTML = '<xyz></xyz>'
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
supportsHtml5Styles = ('hidden' in a)
supportsUnknownElements = a.childNodes.length == 1 || (function () {
// assign a false positive if unable to shiv
(document.createElement)('a')
var frag = document.createDocumentFragment()
return (
typeof frag.cloneNode == 'undefined' ||
typeof frag.createDocumentFragment == 'undefined' ||
typeof frag.createElement == 'undefined'
)
}())
} catch (e) {
supportsHtml5Styles = true
supportsUnknownElements = true
}
}())
/*--------------------------------------------------------------------------*/
/**
* Creates a style sheet with the given CSS text and adds it to the document.
* @private
* @param {Document} ownerDocument The document.
* @param {String} cssText The CSS text.
* @returns {StyleSheet} The style element.
*/
function addStyleSheet (ownerDocument, cssText) {
var p = ownerDocument.createElement('p'),
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement
p.innerHTML = 'x<style>' + cssText + '</style>'
return parent.insertBefore(p.lastChild, parent.firstChild)
}
/**
* Returns the value of `html5.elements` as an array.
* @private
* @returns {Array} An array of shived element node names.
*/
function getElements () {
var elements = html5.elements
return typeof elements == 'string' ? elements.split(' ') : elements
}
/**
* Returns the data associated to the given document
* @private
* @param {Document} ownerDocument The document.
* @returns {Object} An object of data.
*/
function getExpandoData (ownerDocument) {
var data = expandoData[ownerDocument[expando]]
if (!data) {
data = {}
expanID++
ownerDocument[expando] = expanID
expandoData[expanID] = data
}
return data
}
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement (nodeName, ownerDocument, data) {
if (!ownerDocument) {
ownerDocument = document
}
if (supportsUnknownElements) {
return ownerDocument.createElement(nodeName)
}
if (!data) {
data = getExpandoData(ownerDocument)
}
var node
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode()
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode()
} else {
node = data.createElem(nodeName)
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node
}
/**
* returns a shived DocumentFragment for the given document
* @memberOf html5
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived DocumentFragment.
*/
function createDocumentFragment (ownerDocument, data) {
if (!ownerDocument) {
ownerDocument = document
}
if (supportsUnknownElements) {
return ownerDocument.createDocumentFragment()
}
data = data || getExpandoData(ownerDocument)
var clone = data.frag.cloneNode(),
i = 0,
elems = getElements(),
l = elems.length
for (; i < l; i++) {
clone.createElement(elems[i])
}
return clone
}
/**
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
* @private
* @param {Document|DocumentFragment} ownerDocument The document.
* @param {Object} data of the document.
*/
function shivMethods (ownerDocument, data) {
if (!data.cache) {
data.cache = {}
data.createElem = ownerDocument.createElement
data.createFrag = ownerDocument.createDocumentFragment
data.frag = data.createFrag()
}
ownerDocument.createElement = function (nodeName) {
//abort shiv
if (!html5.shivMethods) {
return data.createElem(nodeName)
}
return createElement(nodeName, ownerDocument, data)
}
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
'var n=f.cloneNode(),c=n.createElement;' +
'h.shivMethods&&(' +
// unroll the `createElement` calls
getElements().join().replace(/\w+/g, function (nodeName) {
data.createElem(nodeName)
data.frag.createElement(nodeName)
return 'c("' + nodeName + '")'
}) +
');return n}'
)(html5, data.frag)
}
/*--------------------------------------------------------------------------*/
/**
* Shivs the given document.
* @memberOf html5
* @param {Document} ownerDocument The document to shiv.
* @returns {Document} The shived document.
*/
function shivDocument (ownerDocument) {
if (!ownerDocument) {
ownerDocument = document
}
var data = getExpandoData(ownerDocument)
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
data.hasCSS = !!addStyleSheet(ownerDocument,
// corrects block display not defined in IE6/7/8/9
'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
// adds styling not present in IE6/7/8/9
'mark{background:#FF0;color:#000}'
)
}
if (!supportsUnknownElements) {
shivMethods(ownerDocument, data)
}
return ownerDocument
}
/*--------------------------------------------------------------------------*/
/**
* The `html5` object is exposed so that more elements can be shived and
* existing shiving can be detected on iframes.
* @type Object
* @example
*
* // options can be changed before the script is included
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
*/
var html5 = {
/**
* An array or space separated string of node names of the elements to shiv.
* @memberOf html5
* @type Array|String
*/
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',
/**
* A flag to indicate that the HTML5 style sheet should be inserted.
* @memberOf html5
* @type Boolean
*/
'shivCSS': (options.shivCSS !== false),
/**
* Is equal to true if a browser supports creating unknown/HTML5 elements
* @memberOf html5
* @type boolean
*/
'supportsUnknownElements': supportsUnknownElements,
/**
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
* methods should be overwritten.
* @memberOf html5
* @type Boolean
*/
'shivMethods': (options.shivMethods !== false),
/**
* A string to describe the type of `html5` object ("default" or "default print").
* @memberOf html5
* @type String
*/
'type': 'default',
// shivs the document according to the specified `html5` object options
'shivDocument': shivDocument,
//creates a shived element
createElement: createElement,
//creates a shived documentFragment
createDocumentFragment: createDocumentFragment
}
/*--------------------------------------------------------------------------*/
// expose html5
window.html5 = html5
// shiv the document
shivDocument(document)
}(this, document))
二、添加元信息，让浏览器处于最优渲染模式
<!-- 设置IE总是使用最新的文档模式进行渲染 -->
<mata http_equiv="X-UA-Compatible" content="IE=Edge">
<!-- 优先使用webkit(Chrome)内核进行渲染，针对360等壳内核 -->
<meta name="renderer" content="webkit">
第一行是写给ie 的，第二行是写给国内双核浏览器看的。国内双核浏览器大部分主流是Chrome 的webkit ，和IE 的trident
