Question

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

我的代码看起来基本上是这样的：

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

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

Answer 1

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

<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 的聪明且有点创造性的方法是插入IE / Win 6-8可以理解的元素（例如普通的旧<div>）语义HTML5元素：

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

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

aside,
#sidebar {
    ...
}

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

有关HTML5元素和IE / Win的进一步阅读，请参阅Modernizr。

Answer 2

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

相比之下，较旧版本的IE将不允许您根据标签来设置标签（例如，IE 6不知道<abbr>标签，即使它在HTML 4规范），除非您通过JavaScript创建标记的实例。这就是HTML5 shiv的作用。

旧版浏览器中无法识别的<section>标记的解决方法</section>

2 个答案: