采用 <div> 作為HTML5語義元素的備用標簽

Question

我計划使用一些新的HTML5語義元素，但是即使在較新的瀏覽器上，似乎也無法很好地支持其中一些（據我所知，IE11不支持main）是否有辦法使它們如果不支持它們，則將其視為<div> ，因為我計划使用的HTML5語義標記目前與divs AFAIK基本相同（頁眉，頁腳，主要是我當前計划使用的那些，還有畫布，但是並不是畫布可以做的很好的替代標記）。

當前，如果我在IE中使用不受支持的標簽之一，它似乎被視為未樣式化的標簽，但是問題是我無法在CSS中設置其寬度或高度。 我該怎么做才能將其視為a，並使用標簽名稱作為選擇器，將我放入css的所有樣式應用於該元素，就好像它是<div> 。

main
{
    width: 100px;
}

不能在IE11中使用，如果是IE7或我不太擔心的東西，但是很多人仍在使用IE的更新版本，並且我不希望網站向他們顯示不正確。

Answer 1

您需要HTML5填充程序來支持較舊的瀏覽器，但僅使用HTML5填充程序無法修復IE11，請參見： http : //jsfiddle.net/jbowyers/n3qZp/ 。 因此，您還需要CSS重置，其中包括“ main”元素（例如normalize） 。 或者您可以像其他人提到的那樣直接將CSS重置直接添加到您的項目中

    main { display: block;}

Answer 2

html5shiv將允許您設置IE 11（及以下版本）中的main元素的樣式。 還有它所做的解釋（實際上是其整個歷史上的故障） 這里 。

貨幣報價：

順便說一句，如果要將CSS規則應用於IE中的未知元素，則只需執行document.createElement（elementName）。 這樣可以使CSS引擎知道存在具有該名稱的元素

注意 如果您使用的是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和google chrome上測試了多個屬性，包括顏色，寬度和文本修飾，標簽名為<asdasd> ，它的作用與<div>完全一樣），因此如果有人知道任何問題，請告訴我。

Answer 4

我不確定問題的實質是什么，但是標題“使用<div>作為HTML5語義元素的備用標簽”是對以下問題的一個很好的答案：“我如何才能將HTML5 main ， header等標簽用於我的頁面也可以在不支持它們的瀏覽器上使用？”

例如，您將擁有HTML中的<main>...</main>和main { ... } ，

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

在HTML和

.main { ... }

在CSS中。

這可能看起來很多余，並且通過使用html5shiv之類的polyfill並顯式聲明main { display: block }如果polyfill不這樣做的話），您可以獲得幾乎相同的瀏覽器覆蓋率。 但是，通過這種方法，您將以舊的健壯方式進行所有樣式設置，並且僅將新元素用於其語義。 （實際上，“語義”沒有任何意義，但是也許有一天某些程序會識別main ， article等，並以某種特殊方式對其進行處理。）