Question

我打算使用一些新的HTML5语义元素，但看起来有些它们甚至在较新的浏览器上也得不到很好的支持（据我所知，IE11中不支持main）有没有办法如果它们不受支持，将它们视为<div>，因为我计划使用的HTML5语义标签目前与div AFAIK基本相同（页眉，页脚，主页是我目前计划使用的那些，还有画布，但没有一个好的替代标签来做画布做的事情。）

目前，如果我在IE中使用其中一个不受支持的标签，它似乎被视为一个没有样式的标签，但问题是我无法在css中设置它的宽度或高度。我可以做些什么来将它视为a并将我放在css中的所有样式应用于该元素，使用标记的名称作为选择器，就像它是<div>一样。

main
{
    width: 100px;
}

在IE11中不起作用，如果它是IE7或其它我不会太担心，但很多人仍然使用更新版本的IE，我不希望网站显示不正确。< / p>

Answer 1

您需要HTML5填充程序来支持旧浏览器，但仅使用HTML5填充程序不能修复IE11，请参阅：http://jsfiddle.net/jbowyers/n3qZp/。所以你还需要一个CSS重置，其中包括＆＃39; main＆＃39; normalize之类的元素。或者您可以直接将CSS重置添加到您的项目中，如其他人所述

    main { display: block;}

Answer 2

html5shiv将允许您设置IE 11中的main元素的样式（以及更少）。它解释了它的作用（实际上是整个历史的细分）here。

钱报价：

顺便说一句，如果你想要CSS规则应用于IE中的未知元素，你只需要做document.createElement（elementName）。以某种方式让 CSS引擎知道具有该名称的元素存在

NB。如果您正在使用HTML5并且计划支持低于IE 9的任何内容，那么您可能应该使用shiv。

Answer 3

我想我找到了解决方案。

在我的css文件中，如果我这样做：

main /*or any other unsupported tag that you want treated as a div*/
{
    display:block;
    other-property:other-value;
    other-property:other-value;
    ...
}

它似乎与<div>标记相同。我还没有彻底测试或研究过这个解决方案（测试了IE11上的几个属性，包括颜色，宽度和文本修饰，以及带有<asdasd>标签的谷歌浏览器，它的工作方式与<div>完全相同，所以如果有的话我知道有任何问题请告诉我。

Answer 4

我不确定问题究竟是什么，但标题“使用<div>作为HTML5语义元素的备份标记”是对“如何使用HTML5 {{1}”这一问题的一个很好的答案。 }，main等标记我的页面也适用于不支持它们的浏览器？“

例如，您可以使用HTML中的header和CSS中的<main>...</main>，而不是

main { ... }

HTML中的

和

<div class=main>
<main>...</main>
</div>

CSS中的

。

这可能看起来多余，并且通过使用像html5shiv这样的polyfill来获得几乎相同的浏览器覆盖率，并且如果polyfill不这样做，则显式声明.main { ... }。但是在这种方法中，您以旧的健壮方式执行所有样式，并仅将新元素用于其语义。（实际上，“语义”并不意味着什么，但也许有一天某些程序会识别main { display: block }，main等，并以某种特殊的方式处理它们。）

使用<div>作为HTML5语义元素的备份标记</div>

4 个答案: