Question

好的我正在尝试调试我的布局，看看为什么它在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及以下版本，它启动了自动关闭的东西。我以前从未遇到过这个问题。

Answer 1

我认为这是因为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元素。

Answer 2

我知道你在这个具体案例中已经标明了正确答案，但这可能有助于其他人：

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

现代浏览器尝试自动关闭不正确的代码，这可能很烦人，因为当客户端在旧版本的IE中指出它时，您才意识到某些东西已经出现了！

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

Answer 3

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

改变这个：

<section id="top-bar"/>

为：

<section id="top-bar">

IE8自动关闭标签

3 个答案: