Question

我有一个简单的界限：

 #footer {
    position:relative;
    border-top:1px solid #cecece;
    z-index:20;
  }

  #footer ul.footer-row {
    float: left;
    margin: 0 32px;
  }

IE9 IE10一切正常，花花公子。但由于某些原因，IE8不会渲染此CSS中的任何行，除非我从#footer中取出它并将其单独放置：

 #footer {
  position:relative;
  border-top:1px solid #cecece;
  z-index:20;
 }

 ul.footer-row {
      float: left;
      margin: 0 32px;
 }

那么IE8之后有什么奇怪的规则呢？完全难倒。

这是我的SCSS：

#footer {
  position:relative;
  border-top:1px solid #cecece;
  z-index:20;
  nav#footer_inside {
     font-size:14px;
     margin:0 auto;
     ul.footer-row {
       float: left;
       margin: 0 32px;
       a { margin-bottom: 2px; }
     }
  }
}

这就是它编译并有效忽略的内容。

#footer nav#footer_inside ul.footer-row {
  float: left;
  margin: 0 32px;
}

Answer 1

将HTML5 shiv添加到<head>：

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

IE＆lt; = 8默认情况下不会标记其标记名称无法识别的元素。当给定的标记名称传递给document.createElement()时，这会发生变化，这基本上就是shiv对所有HTML5的新标记名称的作用。

从历史上看，这种“黑客”已经在HTML5标准化过程的早期阶段被发现，从而推动了HTML5语义的采用。

出于某种原因IE8在我的Sass文件中使用继承的html5 CSS并不酷？

1 个答案: