首先我们得了解下老式浏览器到底包含哪些浏览器,其中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下的效果
在Firefox 12.0下的效果
在IE6下的效果
IE6不能识别 section标签,定义在标签上的 CSS 样式没有起到就有的作用
既然因为不能识别标签而不能使用, 解决办法就是让标签被识别出来。 所幸,简单地通过 document.createElement(tagName) 即可以让浏览器识别标签和 CSS 引擎知道该标签的存在。假设我们上面的例子的 <head> 区域加上如下代码。
<script> document.createElement('article'); </script>
在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>
转载请注明出处:唯众网络