EPISODE 45

第45话:兼容性大作战

面对古老的 IE 浏览器,我们该如何拯救那些无法识别的新标签?

🧟‍♂️
我是 IE8... 我不认识 <header>... 我不认识 <article>... 吃掉...
🦸‍♂️
糟糕!老旧浏览器把新标签当成行内元素或者直接无视了!

旧浏览器(如 IE8)不知道如何处理新标签,我们需要教教它们。

🧙‍♂️
第一招:用 CSS 告诉它们这些是块级元素!
header, section, footer, aside, nav, main, article, figure { display: block; }
🧟‍♂️
还是... 不认识... 无法渲染...
🧪
祭出终极法宝:HTML5 Shiv!这瓶药水能让 IE8 变聪明!
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]-->

把这段代码放在 <head> 里,IE8 就能神奇地识别新标签了!