css - 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 元素声明为 block 元素。我将此行用于 Internet Explorer，但您可以根据需要修改它。

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

来自Modernizr Documentation :

You’ll also probably want to set many of these elements to display:block;