無法識別的解決方法 <section> 舊版瀏覽器中的標簽

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 >標簽的瀏覽器中，內部<section >中的內容的行為就好像該標簽不存在，並且內容只是填充了頁面的寬度。 知道我能做什么嗎？

Answer 1

如果您不介意網站的設計和布局取決於舊版瀏覽器 （主要是IE 6-8版）的JavaScript ，則可以將HTML5 JavaScript填充程序用於IE或Modernizr ：

<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元素內插入IE / Win 6-8可以理解的元素（例如普通的<div> ）：

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

然后，您可以使用ID（對於較舊的瀏覽器）或HTML5元素（對於現代的瀏覽器）來應用CSS：

aside,
#sidebar {
    ...
}

盡管此方法為每個HTML5元素添加了一組額外的標簽- 並且可以說不是純本機HTML5方法 ，但它並不依賴JavaScript，並且啟用或不啟用JavaScript都可以使您網站的布局看起來相同 。

有關HTML5元素和IE / Win的更多信息，請參見HTML5 Shiv的故事。

Answer 2

大多數瀏覽器將未知標簽視為已display: inline應用於它們。 您需要在樣式表中將display: block應用於<section> （以及其他塊級HTML5標簽，如果您打算使用它們）。 （重置樣式表，例如Eric Meyer的樣式表，通常會為您解決這個問題。）

相比之下，舊版的IE根本不允許您對標記進行樣式設置（例如，即使它們在HTML 4規范中，IE 6也不知道<abbr>標記），因為它們根本不了解它們，除非您通過JavaScript創建該標簽的實例。 這就是HTML5 shiv的功能。

無法識別的解決方法 <section> 舊版瀏覽器中的標簽

問題描述

2 個解決方案

解決方案1
4 已采納 2011-06-27 22:21:45

解決方案2
3 2011-06-27 21:53:48

無法識別的解決方法 <section> 舊版瀏覽器中的標簽

問題描述

2 個解決方案

解決方案1 4 已采納 2011-06-27 22:21:45

解決方案2 3 2011-06-27 21:53:48

解決方案1
4 已采納 2011-06-27 22:21:45

解決方案2
3 2011-06-27 21:53:48