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;
}

我希望标题和区域内容周围有边框，但实际上只有一个看起来像'['的边框，并且标题在其下面。

出了什么问题？

- Joe Flynn

---

@feela -- 你确定吗？Modernizr确实包含Shiv功能，并且适用于至少IE8和IE7。（我们正在为需要在IE7中工作的网站使用它，效果很好）。有关其功能的更多信息，请参见此答案：https://dev59.com/gG865IYBdhLWcg3wW9RE#3855343 - Spudley

@feeela是不正确的。我们使用它，从IE7到最新版本都可以正常工作。 - Michael Irigoyen

@Spudley @Michael Irigoyen 对不起，我觉得已经太晚了。我已经在另一个问题上回答了... - feeela

Answer 1

即使使用了shiv，对于IE浏览器来说，你仍然需要将HTML 5元素声明为块级元素。我在IE中使用此行代码，但你可以根据需要修改它适用于其他元素。

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

来自Modernizr文档:

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

- Michael Irigoyen

Answer 2

这取决于您想要对元素施加的样式。正如James Long之前所说，自定义元素默认为inline。对于IE8，您还可以通过添加display: inline-block;来给元素添加边框。

- Volker E.

Answer 3

有时，自定义元素（这是我们说服IE使用HTML5标签的方法）默认情况下是inline。请尝试添加以下CSS代码：

section,
header {
    display: block;
}

- James Long