IE没有样式化HTML5标签（带shiv）

Question

我正在尝试设置一个<header>并且它在IE中不起作用。我正在使用Modernizr，但我已经尝试过shiv。

示例代码

<section>
  <header>
    <h1>Title</h1>
  </header>
  <p>Body</p>
</section>

样式：

section {
    border: 2px dotted black;
    padding: 0.25em;
}

header h1 {
    background-color: #ccc;
    text-align: center;
    margin: 0;
}

我希望标题和部分内容周围有一个边框，但只有一个'['外观边框，标题位于其下方。

出了什么问题？

Answer 1

使用IE，即使使用shiv，也需要将HTML 5元素声明为块元素。我将此行用于Internet Explorer，但您可以根据需要修改它。

header,nav,article,footer,section,aside,figure,figcaption{display:block}

来自Modernizr Documentation：

  

您可能还想将其中许多元素设置为display:block;

Answer 2

这取决于你试图对元素施加什么样的风格。 正如James Long之前提到的那样，自定义元素默认为inline。对于IE8，您还可以通过添加display: inline-block;来为元素添加边框。

Answer 3

默认情况下，自定义元素（这是我们说服IE使用HTML5标记的方式）是inline。尝试添加以下CSS：

section,
header {
    display: block;
}