1

好的，我正在尝试调试我的布局，看看为什么它在 IE8 及以下版本中都很时髦。当我开始观察代码时，我意识到内部元素的所有包装元素都是自我关闭的。

<section id="top-bar"/>
<div class="container">
  <div class="row">
    <div class="span12">
      <p>ELEMENTS</p>
    </div>
  </div>
</div>
<div class="rivets"/>
</section/>

好吧，我将样式应用于我的 CSS 中的#top-bar：

#top-bar {
  background: #146c7e url('../images/top-bar-bg.png') repeat top left;
  color: #fff;
}

所以在 IE8 及以下的样式中没有被应用。这绝对令人沮丧。这只会在 Magento 中发生在我身上。如果内容不直接在其中，我自己所做的所有其他布局都不会自我关闭。

好吧，人们以为我是在自己添加那些结束标签，但这是我的代码：

<section id="top-bar">
        <div class="container">
            <div class="row">
                <div class="span7">
                    <a href="#" class="tab">Shoppe</a>
                    <a href="#" class="tab">Local</a>
                    <a href="#" class="tab">Half Baked</a>
                </div>
                <div class="span5 mag-links">
                    <?php echo $this->getChildHtml('topLinks') ?>
                </div>
            </div>
        </div>
            <div class="rivets"></div>
    </section>

IE8 会自动添加这些标签。我无法删除它们。因此，该代码在 Chrome、Firefox、IE9 及更高版本中运行良好。但在 IE8 及以下版本中，它会启动自动关闭的东西。我以前从来没有遇到过这个问题。

4

3 回答 3

7

我认为这是因为 IE8 不支持 HTML5 标签，例如section. 如果你想让它在 IE8 中工作，请在文档头部调用以下命令：

<!--[if lt IE 9]>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
  </script>
<![endif]-->

这告诉 IE8 创建这些元素，之后它应该能够将它们识别为 HTML 元素。

于 2013-08-06T17:45:31.233 回答
1

我知道您已在此特定情况下标记了正确答案，但这可能对其他人有所帮助：

当我遇到这些问题时，我在 Firefox 中打开页面，单击“查看页面源代码”，然后检查它是否有任何红色元素。这会显示任何未正确关闭的代码（通常是缺失的</div>），并指出它试图为您修复它的位置。

现代浏览器会尝试自动关闭不正确的代码，这很烦人，因为只有当客户端在旧版本的 IE 中指出某些事情时，您才会意识到出现问题！

希望这可以帮助其他认为他们的问题相似的人。

于 2013-11-22T15:56:58.377 回答
0

您的#top-bar元素不包含其他元素，因此您看不到没有任何大小的元素的背景。

改变这个：

<section id="top-bar"/>

到：

<section id="top-bar">
于 2013-08-06T17:43:36.280 回答