IE8中的Bootstrap如何进行一些样式设计？

Question

我发现如果要使Bootstrap在IE8中工作，则需要使用Respond.js 。 一旦包含在内，除一件事外，其他一切看起来都不错。 似乎HTML5元素的样式不会调整（即使在本地html文件中使用IE11中的开发人员工具（在IE8上具有仿真功能时使用内联代码进行编辑时），但是当我在Bootstrap示例中进行相同操作时，似乎虽然工作得很好）。

从以下位置更改HTML：

<footer>...</footer>

至

<footer style="BACKGROUND-COLOR: tomato">...</footer>

可以在示例页面（在浏览器中进行编辑）内运行，但是在打开本地文件并执行相同操作时不起作用。

为什么我可以在示例页面中的HTML5元素上而不是本地文件上的页脚中添加样式？ 我是否缺少某些文件，或者我需要采取其他措施吗？ 如何使我的<footer>样式工作？

我会建议的一个方法是使它只是一个带有.footer类的<div>元素，但这不是Bootstrap示例中的样子，所以我不知道这是否是解决我自己问题的正确方法经历。

Answer 1

HTML5具有大量新元素，可为页面添加语义。 例如， nav表示导航菜单。

由于IE8对此一无所知，因此无法识别通过CSS应用于它们的样式。 幸运的是，有一种简单的方法可以解决此问题，只需将缺少的元素添加到页面的DOM即可：

<!--[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]-->

显然，您不必定义现有的每个HTML5元素，而只需定义实际使用的元素即可。 顺便说一下，这段代码使用了条件注释 s，这是Microsoft引入的一项功能，专门用于支持浏览器版本的差异。

需要指出的另一件事是，默认情况下HTML5元素显示为block ，但是IE8也不知道。 为了减轻这个问题，您可以指定display: block; 在设计特定元素的样式或在CSS中批量批发时：

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

请注意，如果您使用的是HTML5知道重置样式表（如这一个 ），这大概已经采取为你照顾。

---

其他使用js库的方式

有html5shiv和Modernizr polyfill脚本形式的变通办法。 使用这些库之一向旧IE版本添加对HTML5标签的支持。