Question

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

更改HTML：

<footer>...</footer>

要

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

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

为什么我可以在the example页面的HTML5元素上为页脚添加样式，而不是在我的本地文件中？我错过了一些文件还是我需要做一些不同的事情？如何使我的<footer>样式工作？

我要做的一个建议是使它只是一个带有<div>类的.footer元素，但这不是它在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 comment，这是Microsoft引入的一项功能，专门用于支持浏览器版本的差异。

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

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

请注意，如果您使用的是支持HTML5的重置样式表（例如this one），则可能已经为您解决了这个问题。

使用js liberaries的其他方式

有html5shiv和Modernizr polyfill脚本形式的解决方法。使用其中一个库将HTML5标记的支持添加到旧的IE版本中。

IE8中的Bootstrap如何使一些样式工作？

1 个答案: