本文共 8484 字，大约阅读时间需要 28 分钟。

让IE8支持HTML5 标签使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前很多网站采用的这种方式。针对IE浏览器比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
   

/*** @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/;(function(window, document) {/*jshint evil:true */  /** version */  var version = '3.7.2';  /** 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 = '
   ';        //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) {      // assign a false positive if detection fails => unable to shiv      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';    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;  }  /**   * Extends the built-in list of html5 elements   * @memberOf html5   * @param {String|Array} newElements whitespace separated list or array of new element names to shiv   * @param {Document} ownerDocument The context document.   */  function addElements(newElements, ownerDocument) {    var elements = html5.elements;    if(typeof elements != 'string'){      elements = elements.join(' ');    }    if(typeof newElements != 'string'){      newElements = newElements.join(' ');    }    html5.elements = elements +' '+ newElements;    shivDocument(ownerDocument);  }   /**   * 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) && !node.tagUrn ? 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

压缩版本

/*** @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.2",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?: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,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="
   ",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b)}(this,document);

转载地址：https://jackiehao.blog.csdn.net/article/details/104555325 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！