联系电话:020-28187900

HTML5新标签在老式浏览器的应用

发表时间:2012-09-20 阅读: 2160

首先我们得了解下老式浏览器到底包含哪些浏览器,其中IE6、IE7、 IE8 和 Firefox 2等都属于老式浏览器的范畴。

HTML5 向开发人员提供了很多新的标签,如 section、 nav、article、 header 和 footer 等。这些标签语义化程度高,并且会被经常使用。

下面以section新标签为例子说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试section新标签</title>
<style>
section h1{color:red;}
section p{color:blue;}
</style>
</head>
<body>
<section>
  <h1>唯众网络</h1>
  <p>Copyright © 2012 <a href="http://www.focuznet.com/">www.Focuznet.com</a> All rights reserved.</p>
</section>
</body>
</html>
在Google 21.0.1180.79 m下的效果

在Google 21.0.1180.79 m下的效果

在Firefox 12.0下的效果
Firefox 12.0下的效果

在IE6下的效果
在IE6下的效果

IE6不能识别 section标签,定义在标签上的 CSS 样式没有起到就有的作用
在IE6下的效果

既然因为不能识别标签而不能使用, 解决办法就是让标签被识别出来。 所幸,简单地通过 document.createElement(tagName) 即可以让浏览器识别标签和 CSS 引擎知道该标签的存在。假设我们上面的例子的 <head> 区域加上如下代码。

<script>
        document.createElement('article');
</script>

在IE6下便正常地识别出HTML5的新标签
在IE6下便正常地识别出HTML5的新标签

新的HTML代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试section新标签</title>
<script>
        document.createElement('section');
</script>
<style>
section h1{color:red;}
section p{color:blue;}
</style>
</head>
<body>
<section>
  <h1>唯众网络</h1>
  <p>Copyright © 2012 <a href="http://www.focuznet.com/">www.Focuznet.com</a> All rights reserved.</p>
</section>
</body>
</html>

转载请注明出处:唯众网络


相关文章 【更多】

唯众网络