怎样让WordPress HTML5主题支持IE6/7/8?

一个爱折腾代码的 SEOer,一直觉得SEO的宗旨不单单是优化排名,不仅仅是让搜索引擎蜘蛛觉得你网站好漂亮,更重要的是要人,要访问者觉得网页漂亮优美:
不仅要Spider 看了优雅,也要人类看了优美

于是Html5 语意化标签就成了“众矢之的”,呵呵,下面带来本文的主角,HTML5 & CSS3 wordpress主题一枚。至于HTML5标签语法神马的就不说了,感兴趣的同学直接下载看手册吧->HTML5手册 & CSS3.0手册

该主题是由 @Ethan 设计和编写

—————-
名称
:yoTheme  V1.0 (话说看到什么1.0版本,就觉得跟内测,封测一样。。无名的兴奋)
下载&发布页
WordPress模板 yoTheme v1.0 发布
支持:FF3+|Chrome5+|Safari 4+|Opera 9+|IE 9 (奇怪了,那IE6/7/8支持么?且接着往下看。)
—————-

众所周知,HTML5 最显著的特点就是多了许多新标签,一方面大大加强了语义化的能力,另一方面使得诸多旧版浏览器不识别页面标签了。

怎样解决这种兼容性问题呢?怎样让HTML5 支持 IE 呢?这里提出3中方法:

1. User Agent判别法

既然 IE6/7/8 | FF3- | chrome – 等等低版本浏览器不能识别属于HTML5的新标签,我们可以对这些浏览器进行侦测,向其输出普通的HTML4 标签,例如:用 <DIV> 替代 <article> 等标签。如下:

   1:  <?php
   2:  $ua = $_SERVER['HTTP_USER_AGENT'];
   3:  function htmlUA($html4,$html5) {
   4:   global $ua;
   5:   if (strstr($ua,'MSIE 8.0')||strstr($ua,'MSIE 7.0')||strstr($ua,'MSIE 6.0')||strstr($ua,'Firefox/3')||strstr($ua,'Firefox/2')||strstr($ua,'Opera')) {
   6:   $html = 4;
   7:   }else {$html = 5;}
   8:  }
   9:  ?>

有了上边的函数  htmlUA() 我们在诸如 index.php 中就可以用判断语句来控制对特定浏览器输出html4 标签了。

2. Javascrip IE hack法 (淘宝网的做法)

   1:  <html>
   2:   <head>
   3:   <style type="text/css">
   4:   article { color:red; }
   5:   </style>
   6:   <script type="text/javascript">document.createElement("article");</script>
   7:   </head>
   8:   <body>
   9:   <artical> 自力博客 | zlz.im </artical>
  10:   </body>
  11:  </html>

上面这个就是 HTML5 新标签<article>的demo,在FF4下会显示 自力博客 | zlz.im 红色的字样,但是在IE6/7/8中无法显示,除非加上 document.createElement(“article”); 这一行作为hack。

当然,完成上面的hack后,最后还要在 CSS 文件中给这些新标签定义 display:block; 的属性,如下:

section,article,aside,header,footer,nav,dialog,figure{display:block;}

3.Mode(去掉括号)rnizr库HTML5特效检查

Mode(删除括号)rnizr 就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库,用法简单且有效,这里就不重复劳动了,见蓝色理想->传送门

至此,html5 就能在所有浏览器上兼容运行了

可以不经允许随意转载,分享:广州SEO,移动互联网营销 » 怎样让WordPress HTML5主题支持IE6/7/8?

分享的每套dede模板,整站带数据源码,wordpress模板,整站源码下载,帝国cms模板,带数据帝国cms网站,淘宝客源码,女性网站模板等源码的下载链接地址请咨询QQ索取。
赞 (0)
分享到: 更多