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

Posted 2023-03-05

【中文标题】IE 没有样式化 HTML5 标签（使用 shiv）

【英文标题】：IE not styling HTML5 tags (with shiv)

【发布时间】：2011-09-29 23:21:14

【问题描述】：

我正在尝试设置 <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;

我希望标题和部分内容周围有一个边框，但实际上只有一个看起来像“[”的边框，标题在它下面。

怎么了？

【问题讨论】：

@feela -- 你确定吗？ Modernizr 确实包含 Shiv 功能，它至少适用于 IE8 和 IE7。 （我们将它用于需要在 IE7 中运行的网站，这很好）。有关它的作用的更多信息，请参阅此答案：***.com/questions/3855294/…

@feeela 不正确。我们使用它，它从 IE7 开始工作。

@Spudley @Michael Irigoyen 抱歉，我认为为时已晚。我自己在different question 上回答了这个问题……

【参考方案1】：

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

header,nav,article,footer,section,aside,figure,figcaptiondisplay:block

来自Modernizr Documentation：

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

【参考方案2】：

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

section,
header 
    display: block;

【参考方案3】：

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