H5新标签浏览器的兼容问题

H5新标签浏览器的兼容问题

HTML5作为最新的标准版本，新增了许多标签，如<article>、<footer>、<header>、<nav>等等。但是这些新增的标签对早期的浏览器版本兼容性并不好，在某些情况下，页面在部分浏览器上呈现不正常。下面介绍一些兼容的解决方案。

使用HTML5 Shiv

针对IE浏览器，我们可以使用HTML5 Shiv解决，HTML5 Shiv是一个Javascript库，它可以让IE浏览器支持HTML5新标签。使用方法如下：

使用Polyfill

除了使用HTML5 Shiv，还可以使用Polyfill。Polyfill可以让浏览器支持HTML5新标签，并且它还可以为旧浏览器提供其他的新特性。现在有很多的Polyfill库，如Modernizr和Polyfillr等。使用方法如下：

    <!-- 加载 Polyfill -->
    <script src="https://cdn.bootcdn.net/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script>
      // 加载 HTML5 兼容代码
      Modernizr.load({
        test: Modernizr.canvas,
        nope: 'https://cdn.bootcdn.net/ajax/libs/excanvas/r3/excanvas.compiled.js'
      });
    </script>
  

语意化标签的兼容问题

在使用语义化标签时，应该注意浏览器的兼容情况。由于IE6~IE8只支持部分HTML5标签，如果在这些浏览器中直接使用的话，会导致兼容性问题。可以采用如下两个方案进行解决。

• 方案一：使用JavaScript实现样式切换

          // 将
  标签转换成
  标签
          var articleEls = document.getElementsByTagName('article');
          for (var i = 0, l = articleEls.length; i < l; i++) {
            var articleEl = articleEls[i];
            var divEl = document.createElement('div');
            divEl.innerHTML = articleEl.innerHTML;
            articleEl.parentNode.replaceChild(divEl, articleEl);
          }
        

• 方案二：使用Modernizr库

          if (!Modernizr.sections) {
            $('section').each(function(){
              var section = $(this);
              section.attr('role','region').attr('aria-labelledby', section.find('h1:first').attr('id'));
            });
          }
        

总结

H5新标签浏览器兼容问题是页面开发中必须面对的问题，在实际开发中需要使用正确的解决方案。HTML5 Shiv和Polyfill是两种常用的解决方案，而在使用语义化标签时，需要注意浏览器的兼容情况。选择合适的解决方案，可以有效地解决H5新标签浏览器兼容问题。