如何解决H5新标签兼容问题

来源:互联网 发布:蜜桃影院源码免费 编辑:程序博客网 时间:2024/06/05 02:41

(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来包含本身是非常安全的(假设它没有包含其他的块级元素)。

原创粉丝点击