IE6/7/8兼容HTML5和css3

自己用canvas写了象棋的游戏，后来发现在IE里不显示，就把这些hack方法搜出来了。

HTML5

HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素

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

CSS3

htc文件是要放在服务器上，放在本地测试是不行的！绝大多数数的博客里没提到，我被坑过两天。

IE 6,7,8不支持CSS3中新加属性，通过.htc文件，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）

需要用到css3的样式要在后面补一句behavior:url(ie-css3.htc);.

又看到说用了behavior，z-index为负数的bug；定位要用position：relative。我没碰到这些，但为什么我测试时IE背景色是黑的？

下载htc文件：http://www.css88.com/demo/ie-css3/ie-css3.htc

.box {
     -moz-border-radius: 15px; /* Firefox */
     -webkit-border-radius: 15px; /* Safari and Chrome */
     border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

     -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
     -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
     box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

     behavior: url(ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */
}