【HTML5】html5在ie8及以下的兼容性问题

原文来自:http://huilang.me/ie8-html5/

 

最近仿的几个主题中,有几个是采用html5语法制作的,html5嘛,以后必然大势所趋,但是现有的很多浏览器并不支持这种新的标准。

而我制作网站习惯用的是chrome浏览器的,当然不存在不兼容问题了。

等主题做完上线后,经ie8以下浏览器测试,页面惨不忍睹,我在ie10的ie8模式下查看了ie7解析html的语法全部乱了,比如

这里是footer部分

他在ie8以下解析成了

这里是footer部分

注意下其中的/符号,整个框架在ie8以下全部被无视掉了,且其他的语法 如

;

;等等都解析错误

这个后果就造成了针对footer,header,aside等的css全部失效,后果可想而知吧。

或许是我对html5这种语法还很陌生吧,网上百度了下居然没找到解决方法,然后就在几个交流群中咨询了下,但是无功而返,但是群友提醒了一句是不是meta信息问题,我也尝试了下,还是不行,然后我只能对比其他的HTML5站点是怎么实现解析的,最终在源码中发现他们在里面加了一句js,使得低版本的浏览器也能正常解析。纠结。。。下面就是对应的js代码了。

//方法:创建html5元素header,……footer等等

或者用下面这句也可以

或者用Google的html5兼容性js也行(ps:国内部分地区被墙,最好下载到本地后加载)

然后把你用到的标签加进去吧,这样就能正常解析了。

 但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

demo:

doctype html>
<html>
  <head>
    <title>first.fmtitle>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
      margin:0; 
      padding:0;
      font-family:Arial;
      background:#ccc;
    }
    header {
      text-shadow: 0 1px #000;
      background: #ff3019; /* Old browsers */
      background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 20%, #ff3019 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(20%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* W3C */
    }
    h1 {
      padding:0.5em 0.2em; 
      margin:0;
      font-size: 18px;
      color:white;
    }
    h2 {
      text-shadow: 0 1px #FFFFFF;
      background: #eeeeee; /* Old browsers */
      background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
      padding:0.5em 0.2em; 
      margin:0;
      font-size: 16px;
      color:#000;
    }
    nav ul {
      border-top:1px solid #fff;
      list-style-type: none;
      padding:0;
      margin:0;
    }
    nav li {
      padding:0.5em 0.2em; 
      margin:0;
      background:#AFAFAF;
      border-bottom:1px solid #fff;
    }
    nav li a {
      height:20px;
      display:block;
      text-decoration:none;
      color:white;
    }
    /*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
    style>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
script>
  head>
  <body>
    <header>
      <h1>first.fmh1>
    header>
    <div id="main">
      <h2>Pagesh2>
      <nav>
        <ul class="list">
          <li class="list"><a href="music.html">Musica>li>
          <li class="list"><a href="radio.html">Radioa>li>
          <li class="list"><a href="events.html">Eventsa>li>
          <li class="list"><a href="charts.html">Chartsa>li>
          <li class="list"><a href="community.html">Communitya>li>
          <li class="list"><a href="help.html">Helpa>li>
          <li class="list"><a href="about.html">Abouta>li>
        ul>
      nav>
    div>
    <footer>
      <small>© 2011 first.fmsmall>
    footer>
  body>
html>


 

 

转载于:https://www.cnblogs.com/positive/p/3972351.html

你可能感兴趣的:(【HTML5】html5在ie8及以下的兼容性问题)