最近HTML5火得不得了，网上到处都是用它来做网页的教程。但是，你知道吗？并不是所有浏览器都能全然支持这玩意儿，特别是那些古老的浏览器，像IE8以下的版本。这时候，做网页的人就有点犯愁了，因为不是人人都喜欢更新自己的浏览器。那么，有什么办法解决这个问题？别担心，今天我就给大家分享个小技巧，让那些旧版浏览器也能用上HTML5的新标签，确保网页的兼容性和功能正常。
IE8对HTML5新标签的支持不足
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
明白，IE8这旧版浏览器有点过时了，碰到新的HTML5标签就傻眼。比如说，这个标签，在IE8里面打开网页的话，恐怕只能一脸懵逼，全不理睬你。为啥？因为IE8以及更早的浏览器认不得这些新标签，也就搞不定。于是，问题来了：如果你让IE8去看那些含有大量HTML5新标签的网页，那么这些新标签部分就可能跑掉，让人大跌眼镜。
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
利用JavaScript让IE8支持新标签
IE8对HTML5的新标签不感冒？没关系，咱们有招儿。比如利用JavaScript里的document.createElement功能，就能随心所欲地创建想要的HTML元素。只需在页面加载时，偷偷给IE8加点料，新标签它就会识别的嗯。虽然有点费劲，但为了兼容性，这点辛苦还是值得的哈~
使用HTML5shim框架简化过程
嫌敲脚本累？那你试试html5shim这个神器！往网页头放一下，新标签就搞定了，省得再担心浏览器老出问题，能安心忙设计和其他功能了。
Modernizr框架的多功能性
聊起网页设计的兼容性问题，你们知道吗？除了html5shim，还有个神器Modernizr！它不仅可以提供新标签的支持，还能检查HTML5和CSS3特性在不同浏览器中的表现，并自动添加相应的CSS类。这样不管浏览器性能如何，都能用上最适合的CSS代码，保证兼容性。难怪那么多程序员都喜欢用Modernizr，真的是太实用了！
音频和视频的兼容性问题
说起HTML5，那家伙可是网上听音乐、看视频神器！不过，因为每种浏览器支持的音视频格式不同，兼容这事儿就稍微复杂了点。为了照顾到大伙儿，咱们得备齐好几种版本。比如，音频方面，MP3和Ogg两种格式都得有；至于视频，WebM和MP4必不可少。这样无论你用啥浏览器，都能找到心仪的那一款，畅快地享受音乐和影片。
#nice {
background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}
总结和未来展望
HTML5确实不错，网页做好省时省劲儿不少，不过浏览器兼容这事儿就有点麻烦了。别急，有JavaScript、html5shim和Modernizr帮你忙，这个难题就能顺利解决！还有浏览器更新之后，对HTML5的支持可是越来越给力噢。这么看来，HTML5的兼容性问题迟早都会没掉，网页制作也就更加轻松高效！
小伙伴们，你们在用浏览器时遇到过网站功能无法使用吗？那你们是咋解决的？大家快来说说呗！别忘了给咱文章点个赞分享下哟~
评论0