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