让 HTML5 标头与 IE 一起使用——HTML5 Shiv 无法修复我的布局答案

【问题标题】：Make HTML5 header work with IE — HTML5 Shiv doesn’t fix my layout让 HTML5 标头与 IE 一起使用——HTML5 Shiv 无法修复我的布局
【发布时间】：2012-01-11 03:05:47
【问题描述】：

前几天我发布了关于我在 IE 中的布局遇到的问题。

今天我发现了我的问题，IE 不适用于我的 HTML5 元素，例如 <header> 和 <footer>

当我用<div> 替换它们时，我几乎所有的问题都消失了。所以我开始寻找如何为这些 HTML5 特性添加 IE 支持。

我也看到了Modernizr 和HTML5 Shiv，这是添加对<header> 之类的支持的基本Javascript...

document.createElement("header");

现在你可以看到我已经完成了我的研究，但我仍然没有任何运气。 Modernizr 没有工作，所以我尝试了 HTML Shiv 技巧，但仍然没有运气，所以接着使用 Javascript 技巧，也没有运气。

那么请有人告诉我我能做什么？

我的 IE 版本是 8，抱歉我没有现场版的网站可以展示

【问题讨论】：

如果您提及问题所在会有所帮助...
你能发布你的来源吗，我假设你的问题是，“我做了这个 HTML5 布局，但它在 IE 上不起作用，为什么？”
我猜你是通过ajax添加这些html5元素吧？
@Wojciech Bednarski 你为什么这么认为？
啊，等一下你知道这些元素在IE下默认有display: inline吗？尝试将其更改为display: block。如果你能提供一些代码，那将非常有帮助。

标签： javascript internet-explorer html dom

【解决方案1】：

这些脚本将使新元素在 IE 中工作，但它们的显示样式仍然缺失。添加以下我从 html5boilerplate.com 复制粘贴的 css：

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

【讨论】：