如何在 Internet Explorer 8 中使用 HTML5 header 标签？

Question

我有这个简单的 HTML 5 页面，在 Internet Explorer 8 上也必须运行 :

<html>
    <head>
        <link href="<c:url value="resources/css/style.css" />" rel="stylesheet">

        <link href="<c:url value="resources/css/bootstrap.css" />" rel="stylesheet">
        <link href="<c:url value="resources/css/bootstrap-theme.css" />" rel="stylesheet">



        <title>Login Page</title>

    </head>

    <header>
      <div class="container">
        <img src="resources/img/logo2.png" class="logo">


        <div id="login-box">

            <c:if test="${not empty error}">
                <div class="error">${error}</div>
            </c:if>

            <form class="form-inline" name='loginForm' action="<c:url value='/j_spring_security_check' />" method='POST'>
              <div class="form-group">
                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                <input type='text' name='username' class="form-control" id="exampleInputEmail3" placeholder="Nome Utente">
              </div>

              <div class="form-group">
                <label class="sr-only" for="exampleInputPassword3">Password</label>
                <input type='password' name='password' class="form-control" id="exampleInputPassword3" placeholder="Password">
              </div>

              <!--  <button type="submit" class="btn btn-default">Sign in</button> -->
              <input id="ricorda" name="submit" type="submit" class="btn btn-default" value="login" />

              <br>

              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </form>
        </div>

      </div>
    </header>

    <body onload='document.loginForm.username.focus();'>
        <jsp:include page="header.jsp"/>
        <div id="intestazione">
            <h1 align="center">WIFI e PNSD</h1>
        </div>
        <div id="login-box">

            <h3>Accesso al sistema</h3>

        </div>
         <jsp:include page="footer.jsp"/>

         <script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>

    </body>
</html>

问题是，当我尝试在 IE8 中打开它时，它没有看到 HTML5 标签作为 header 标签。

所以我找到了这个解决方案：http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

指定在我的页面中添加这些行来解决问题：

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

但是我到底要把这些行放在上一页的什么地方呢？这些线到底是什么？

Tnx

Answer 1

使用 HTML5 Shiv 增加对旧浏览器的兼容性。

http://code.google.com/p/html5shiv/

Answer 2

您使用和发布的解决方案是 IE conditional comment，您的示例将强制 IE 9 以下的任何版本呈现，从而识别这些元素。

不过您的页面存在一些问题。您在 <html> 标签上方缺少 HTML5 文档类型：<!DOCTYPE html>。您可能还需要将 display: block 添加到 CSS.

中的 HTML5 元素

您询问应该在什么地方使用条件注释。这可以放在 <head> 部分的内部，也可以放在 </body> 结束标记的上方。为确保没有 FOUC 或任何 IE 怪癖，我建议将它放在 <head> 标签内。

或者，最简单的选择是使用 HTML5 shiv 的。

Answer 3

AndreaNobili，请在您的 html 文件头添加：

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

现在 ie 8 浏览器支持所有 html5 元素。

如何在 Internet Explorer 8 中使用 HTML5 header 标签？

How to use the HTML5 header tag into Internet Explorer 8?

html

css

internet-explorer-8