使用IE8的html5错误

时间:2014-04-29 16:32:09

标签: javascript html css html5 internet-explorer-8

我使用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>
有人可以帮助我吗?

谢谢。

1 个答案:

答案 0 :(得分:4)

您无法在块中包含script同时包含src和文本,因此您需要包含两个不同的script块。也不需要反斜杠,所以请使用此代码

<!--[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元素。