(1)、使用html5shiv(常用)
查看了一下,发现了html5shiv能解决这个问题,可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行:
<!--if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用,因为IE必须在元素解析这前知道这些元素,才能启作用!但马海祥还要提醒你一下:还要在你的CSS文件中加上以下代码,不然有可能会出现些莫名其妙的问题。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google为IE6支持canvas元素写的脚本,以后马海祥会跟大家再细说这样的例子,感兴趣的朋友可以去试试。
(2)、使用Kill IE6
除此之外你还可以使用KILL IE6一族,前提是你的浏览器允许执行JS文件。方法很简单,在你的网站的之前加上以下代码就可以了:
上面写的
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
虽然微软将IE向标准迈进了一大步,而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。
在X-UA-Compatible中可用的方法有:
<meta http-equiv="X-UA-Compatible" content="IE=6" > <meta http-equiv="X-UA-Compatible" content="IE=7" > <meta http-equiv="X-UA-Compatible" content="IE=8" > <meta http-equiv="X-UA-Compatible" content="IE=edge" >
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
而使用,Emulate模式后则更重视。
所以目前来说还是以使用
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
为首选。
7、通过修改HTML部分来实现
我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求?需要修改的Web应用视图越多,你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现,即使出现了bug,也可以减少你查找错误的范围。如果一个视图破相了,我可以知道这是因为我增加了一个section元素,而不是考虑是不是CSS文件修改来带的影响。
在研究了所有这些解决方案,并进行一些尝试和设计之后,我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在,我在他的方案基础上做了一些改进,来达到我想要的结果。
首先,我不会给那些代表HTML5元素的class增加样式(所以我不会使用.section这样的选择器)。我保留了div元素,然后再增加一个带语义的class来应用样式,并作为进行JavaScript操作的钩子。例如,这样的代码:
经过改进后:
<section>
<div class="section content"> <!-- content -> </div></section>
这里写链接内容
这样的修改完成后,我依然使用.content作为样式和脚本的入口。这也意味着我不需要修改CSS和JavaScript。
然后,为了避免hgroup标签这样的情况,我选择不使用这个标签。我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素,如果你确实想要使用这个标签,那么使用hrgoup来包含本身是非常安全的(假设它没有包含其他的块级元素)。