html - IE8 自动关闭标签

Question

好吧，我正在尝试调试我的布局，看看为什么它在 IE8 和更低版本中都很奇怪。当我开始观察代码时，我意识到内部元素的所有包装元素都在 self 关闭。

<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 元素。