如何让低版本IE浏览器支持HTML5标签并为其设置样式

　　现代的浏览器都支持HTML5，HTML5定义了 8 个新的 HTML 语义元素。所有这些元素都是 块级 元素。

　　为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:　　　　

?
1
2
3
header, section, footer, aside, nav, main, article, figure {
    display: block;
}

　　

　　然而低版本IE浏览器并不支持这些HTML5元素，如：　　

?
1
2
3
4
5
6
7
8
9
10
<style>
　　header{
    display: block;
    background-color: red;
　　}
</style>
</head>
<body>
<header>hello world!</header>
</body>

　　我们都知道这里应该实现的效果是所有浏览器下的header元素都是块元素且背景色为红色，然而，事与愿违，低版本IE浏览器（IE8及以下）并不能实现预期的效果，虽然能显示header元素里的内容，但是为其设置的样式并不起作用，很显然，低版本IE浏览器不支持，那么，应该如何让低版本IE浏览器支持HTML5元素呢？

　　这里，还是以这个为例，很简单，只需要使用JavaScript 语句 document.createElement("header") 即可让低版本 IE 浏览器支持新的元素。代码如下：　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
　　var header = document.createElement("header");
</script>
<style>
　　header{
    display: block;
    background-color: red;
　　}
</style>
</head>
<body>
<header>hello world!</header>
</body>

　　脚本与样式表顺序可颠倒放置。

　　到这里，低版本IE浏览器就可以支持html5元素了。

　　

　　更简单的方法是使用HTML5 shiv来解决。　　

?
1
2
3
<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

　　以上代码意思是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

 

posted @   江峰★  阅读(1051)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae