自HTML5标准的提出就得到非常多的关注,而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题,让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。

<!–[if IE]>  
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>  
<![endif]–>

上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

以下是html5的js文件中的代码:

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

除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。



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

补充阅读:以下代码是发布在github.com上的html5shiv.js,版本:3.7.0,注释也比较完整。可能GitHub打开速度有些慢,这里就直接将代码复制贴过来,如果需要最新版本,地址:https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js


 /** 
* @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 
*/ 
;(function(window, document) { 
/*jshint evil:true */ 
  /** version */ 
  var version = '3.7.0'; 

  /** 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) { 
      // 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<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) && !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<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,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' + 
        // adds styling not present in IE6/7/8/9 
        'mark{background:#FF0;color:#000}' + 
        // hides non-rendered elements 
        'template{display:none}' 
      ); 
    } 
    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 dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video', 

    /** 
     * current version of html5shiv 
     */ 
    'version': version, 

    /** 
     * 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)); 




把html5shiv.js在head里面引入,如下:


<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/html5shiv.js"></script> 
        <style type="text/css"> 
            nav { 
                width:200px; 
                height:100px; 
                background:#f12; 
                } 
        </style> 
    </head> 
    <body> 
        <nav>123abc</nav>abc123 
    </body> 
</html>