旧浏览器中无法识别的 <section> 标签的解决方法答案

【问题标题】：Workaround for unrecognized <section> tags in older browsers旧浏览器中无法识别的 <section> 标签的解决方法
【发布时间】：2011-06-27 21:28:36
【问题描述】：

我有一对嵌套的部分标签来设置我的内容的宽度，但是我遇到了无法识别标签的浏览器（或浏览器版本）的问题：它们只是允许内容填充整个父容器的宽度。

我的代码基本上是这样的：

<body>
    <section style="min-width:800px">
        <section style="width:500px">
            <p>Bunch of Text Here That Forms The Content</p>
        </section>
    </section>
</body>

现在在无法识别<section> 标签的浏览器中，内部<section> 中的内容表现得好像该标签不存在，并且内容只是填充了页面的宽度。知道我能做些什么吗？

【问题讨论】：

你试过ejohn.org/blog/html5-shiv 吗？这篇文章几乎讲述了你需要知道的一切。
不，我没有遇到这个。谢谢，让我读一遍:)
嗯，这涉及 IE，但不涉及其他浏览器，例如较旧的 Firefox 版本。脚本也适用于这些吗？
这就是为什么它不是一个答案，只是一个评论。它为您指明正确的方向。但问题在其他浏览器中基本相同...
@meo：“问题在其他浏览器中基本相同”——在这种情况下并非如此。

标签： html

【解决方案1】：

如果您不介意您网站的设计和布局依赖于旧浏览器的 JavaScript（主要是 IE 版本 6-8），您可以使用 HTML5 JavaScript shim for IE 或 Modernizr： p>

<head>
    <meta charset="utf-8" />
    <title>Stack Overflow Rocks!</title>

    <link rel="stylesheet" href="/path/to/file.css" media="all" />

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

要使用此脚本，它必须包含在元素之前（即在<head> 中），但它出现在任何 CSS 之前还是之后都没有关系。但是，出于性能考虑，最好在此脚本之前包含任何 CSS。

一种巧妙且颇具创意的方法，不依赖于 JavaScript，即在语义 HTML5 元素：

<aside>
    <div id="sidebar">
        <!-- Business as Usual Here -->
        ...
    </div>
</aside>

然后您可以使用 ID（对于旧版浏览器）或 HTML5 元素（对于现代浏览器）应用您的 CSS：

aside,
#sidebar {
    ...
}

虽然这种方法为每个 HTML5 元素添加了一组额外的标签 - 并且可以说不是纯 HTML5 方法 - 它不依赖于 JavaScript 和 您网站的无论是否启用 JavaScript，布局看起来都一样。

如需进一步了解 HTML5 元素和 IE/Win，请参阅The Story of the HTML5 Shiv。

【讨论】：

哦，这是一个很好的喊声。可以（如果真的很挑剔的话）对额外的 HTML 元素使用条件 cmets，以便它们只提供给 IE。
哦，这真是太好了。非常感谢！ :)

【解决方案2】：

大多数浏览器将未知标签视为已应用display: inline。您需要在样式表中将display: block 应用于<section>（以及其他块级HTML5 标签，如果您打算使用它们）。（重置样式表，例如 Eric Meyer’s，通常会为您处理此问题。）

相比之下，旧版本的 IE 根本不允许你设置标签的样式，如果他们不知道标签的话（例如，IE 6 不知道 <abbr> 标签，即使它在 HTML 4 中规范），除非您通过 JavaScript 创建该标记的实例。这就是HTML5 shiv 所做的。

【讨论】：