Bootstrap 在 IE8 中如何使某些样式起作用？

Question

我发现如果我想让 Bootstrap 在 IE8 中工作，我需要使用 Respond.js。一旦包括在内，一切看起来都很好，除了一件事。似乎 HTML5 元素样式不会调整（即使在我的本地 html 文件中使用 IE11 中的开发人员工具（在 IE8 上使用仿真）时使用内联代码进行编辑，但是当我做同样的事情时在 Bootstrap example 上，它似乎工作得很好。

更改 HTML 来自：

<footer>...</footer>

到

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

在示例页面中有效（在浏览器中编辑时），但当我打开本地文件并执行相同操作时无效。

为什么我可以为 the example 页面中 HTML5 元素的页脚添加样式，但不能在我的本地文件中添加样式？我是否遗漏了一些文件，或者我需要做一些不同的事情吗？我怎样才能让我的 <footer> 造型发挥作用？

我会做的一个建议是使它只是一个带有 class .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 元素，只需定义您实际使用的元素即可。顺便说一句，这段代码使用了conditional comments，这是微软引入的一个特性，专门支持浏览器版本的差异。

另一个需要指出的重要事情是 HTML5 元素默认显示为 block，但 IE8 也不知道。要缓解此问题，您可以在为特定元素设置样式时指定 display: block;，或者在 CSS:

中进行批发

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

请注意，如果您使用的是 HTML5 感知重置样式表（如 this one），这可能已经为您处理好了。

Other way to use js liberaries

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

Bootstrap 在 IE8 中如何使某些样式起作用？

Bootstrap in IE8 How to make some styling work?

html

css

internet-explorer-8

twitter-bootstrap