HTML5中的語義標籤兼容IE8以及更低版本的瀏覽器

時間 2019-12-04

標籤 html5 html 語義標籤兼容 ie8 以及版本瀏覽器欄目 HTML5 简体版

原文原文鏈接

看某教程，說讓HTML5的這些語義標籤可以兼容低版本的瀏覽器，原文是「你能夠設置css的display屬性爲block」。很好理解，就設置css樣式爲block嘛，那就直接設置咯：css

1 header, section, footer, aside, nav, main, article, figure {
2     display: block; 
3 }

 1 <body>
 2     <header>header元素</header>
 3     <section>section元素</section>
 4     <footer>footer元素</footer>
 5     <aside>aside元素</aside>
 6     <nav>nav元素</nav>
 7     <main>main元素</main>
 8     <article>article元素</article>
 9     <figure>figure元素</figure>
10 </body>

HTML部分

首先先看下這些語義標籤在瀏覽器支持的時候的樣式是怎麼樣的：瀏覽器

很好，看的出來是塊級標籤。而後咱們用IE11自帶的模擬舊版本IE的功能（f12，靠近右邊有一個顯示器和手機放在一塊兒的圖標）ide

咱們切成IE8：spa

阿，是變成了內聯元素。。。不對教程上不是剛剛說設置成display;block就好了，還說「此外，全部瀏覽器，包括舊的和最新的，對沒法識別的元素會做爲內聯元素自動處理。」。（這個時候個人理解是沒法識別的它就看成是一個像<span>這種的內聯元素啥的，並無想到得先建立）3d

瞎折騰了半小時（不要問爲啥用了半小時，回想起來只想掐死本身），搞不定。算了，先看下面的吧。"爲HTML添加新元素"。我一想：是否是還得建立元素阿，寫了個JavaScript建立這些HTML5中的元素：code

1 var newEle = new Array("header","section","footer","aside","nav","main","article","figure");
2 for(var i = 0;i<10;i++) {
3     document.createElement(newEle[i]);
4 }

而後再運行：blog

成了，那我前面那半小時。。。好吧我是個沙雕。教程

<figure>元素跟在正常支持的瀏覽器中不太同樣，是由於正常支持的話，<figure>還有一個style="margin:16px 40px";的樣式，想要徹底同樣就加上這個吧。ip

（由於感受本身太蠢了，以後可能會忘了，就寫下來提醒本身好了┑(￣Д ￣)┍）io