zoukankan      html  css  js  c++  java
  • html新元素不被支持解决方案

    1、CSS声明块级元素

    HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

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

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

    2、为HTML添加新元素

    JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>为 HTML 添加新元素</title>
    <script>
    document.createElement("myHero")
    </script>
    <style>
    myHero {
        display: block;
        background-color: #ddd;
        padding: 50px;
        font-size: 30px;
    }
    </style> 
    </head>
    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <myHero>我的第一个新元素</myHero>
    </body>
    </html>

    但是:Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式

    3、使用html.js解决IE8及更早IE浏览器对HTML5新元素的支持

    我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问

    国外:

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    国内:

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

    所以完美的html5 shiv的解决方案:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
      <!--[if lt IE 9]>
      <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <![endif]-->
    </head>
    <body>
    <h1>我的第一篇文章</h1>
    <article>
    菜鸟教程 —— 学的不仅是技术,更是梦想!!!
    </article>
    </body>
    </html>

    ========================================================

    参考:http://www.runoob.com/html/html5-browsers.html

  • 相关阅读:
    springmvc log4j 配置
    intellij idea maven springmvc 环境搭建
    spring,property not found on type
    intellij idea maven 工程生成可执行的jar
    device eth0 does not seem to be present, delaying initialization
    macos ssh host配置及免密登陆
    centos7 搭建 docker 环境
    通过rest接口获取自增id (twitter snowflake算法)
    微信小程序开发体验
    gitbook 制作 beego 参考手册
  • 原文地址:https://www.cnblogs.com/mankii/p/9920722.html
Copyright © 2011-2022 走看看