HTML5网页制作实例:让IE8支持footer标签

http://www.itjxue.com  2015-08-05 23:40  来源:未知  点击次数: 

因为我们网站不需要兼容ie6,7,我就在网站上用了footer这个标签,结果发现ie9倒是支持这个标签,但是发现ie8却不支持这个标签,代码:

<!doctype html>
 
<html>
 
        <head>
 
                <style type="text/css">
 
                footer{
 
                display:block;
 
                }
 
               
                </style>
 
                <script type="text/javascript">
 
                        document.createElement("footer");
 
                </script>
 
       
 
        </head>
 
        <body>
 
                <footer>
 
                        <p>
 
                                我是一个段落
 
                        </p>
 
                </footer>
 
       
 
        </body>
 
</html>

放到ie8浏览以下,大家可以发现在ie8里,footer部分的代码ie8遇到这个标签就自动闭合了。ie8里footer部分代码是这样的。

<footer />
 
      <p>
 
           我是一个段落
 
      </p>
 
<footer />

这样就会导致你在ie8里不认这些标签,当然ie6,7就更不认了,到时候这些浏览器里布局就会乱。
于是我写了以下css代码。

footer{display:block;}

心想,这下ie8该人的这个标签了吧,
结果ie8却还是不支持。

在网上找到,原来光这样写写css还不行,在为标签设置display:block的同时还得用js在文档里创建这个元素,现在代码如下,ie8已经认识这个标签,而不会遇见这个标签就给它自动闭合了。

<!doctype html>
 
<html>
 
        <head>
 
                <style type="text/css">
 
                footer{
 
                display:block;
 
                }
 
               
                </style>
 
                <script type="text/javascript">
 
                        document.createElement("footer");
 
                </script>
 
       
 
        </head>
 
        <body>
 
                <footer>
 
                        <p>
 
                                我是一个段落
 
                        </p>
 
                </footer>
 
       
 
        </body>
 
</html>

哈哈,这下以后可以放心的在页面上用html5标签了。

(责任编辑:IT教学网)

更多

推荐HTML/Xhtml文章