javascript - html5错误使用IE8

Question

我在使用 html5 和 Css3 的 ie8 上遇到问题(我认为)。

Firefox 和 Chrome 完美运行。

当我尝试使用 ie8 打开网站时，我所有的标题都放入了我的正文中....

CSS

 .main-header {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: 2px;
     color: #000;
     white-space: nowrap;
     padding: 10px;
     background-color: #FFF;
     background-position: right top;
     border-bottom: 1px solid #000000;
     background: url(/images/header_bg.png);
 }

 .main-header2{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000;
    white-space: nowrap;
    padding: 10px;
    background-color: #FFF;
    background-position: right top;
    border-bottom: 1px solid #000000;
    background: url(/images/header_bg.png);
 }


 .main-headertmp {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #000000;
   letter-spacing: 4px;
   white-space: nowrap;
   margin-bottom: 1px;
   border-bottom: 4px solid #4571d4;
   background-color: #FFFFFF;
   background: url(/images/header_bg.jpg);
  }

 html,
 body {
    margin:0;
    padding:0;
    height:100%;
 }

 #content {
  padding:10px;
  padding-bottom:80px; /* Height of the footer element */
 }

  #container {
    min-height:100%;
    position:relative;
    height:100%;
  }

 #header {
         background-color: #FFF;
         background-position: right top;
         border-bottom: 1px solid #C64934;
         background: url(../images/header_bg.png);
  }

  #body {
    padding:10px;
    padding-bottom: 60px;   /* Height of the footer */
    color : #333;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
 }

 #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background-color: #FFFFFF;
    background: #F1F3F5;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
 }

索引头->脚本

    <!--[if lt IE 9]>
      <script src="/javascript/modernzr.js">
        document.createElement(\'container\');
        document.createElement(\'header\');
        document.createElement(\'body\');
        document.createElement(\'footer\');
      </script>
    <![endif]-->

这些元素在 div 上使用。

 <div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
 </div>

有人可以帮助我吗？

谢谢。

Answer 1

您不能在 block 中包含同时包含 src 和文本的 script，因此您需要包含两个不同的 script block 。也不需要反斜杠，因此请改用此代码

<!--[if lt IE 9]>
  <script>
    document.createElement('container'); 
    document.createElement('header');
    document.createElement('footer');
  </script>
  <script src="/javascript/modernzr.js"> </script>
<![endif]-->

注意:在 HTML5 中，语言规范中没有定义 container 元素(还没有？):也许您想创建一个 main 元素。