因為我們網站不需要兼容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標簽了。