zoukankan      html  css  js  c++  java
  • 如何让低版本IE浏览器支持HTML5标签并为其设置样式

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

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

    header, section, footer, aside, nav, main, article, figure {
        display: block; 
    }
    

      

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

    <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 浏览器支持新的元素。代码如下: 

    <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来解决。  

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

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

  • 相关阅读:
    独家首发Java品优购项目课程,20天课程,430个知识点!视频+资料全部免费领!
    Java8 Stream:2万字20个实例,玩转集合的筛选、归约、分组、聚合
    你还在 if...else?代码这样写才好看!
    关于破解
    菜鸟上路
    4、udtf、udf、udaf
    【模板】快速排序
    最短路问题:迪杰斯特拉算法(Dijsktra)
    最短路径问题:弗洛伊德算法(Floyd)
    栈的基本概念
  • 原文地址:https://www.cnblogs.com/jf-67/p/7384025.html
Copyright © 2011-2022 走看看