让低版浏览器显示HTML5

引言：近年来，HTML5和CSS3技术快速兴起，已经被许多开发者定为首选标准，这些技术良好的跨平台性能和对移动平台的支持，为开发者带来了极大的便利。但是有些老版本浏览器对这些新技术并不支持。现在将笔者最近碰到的问题及解决思路与大家一起分享。

故障现象

笔者负责建设的网站，是对社会开放的一个服务性网站。为了给用户带来更好的体验，实现对移动平台的良好支持，我们决定采用HTML5+CSS3的技术方案。网站于2015年底上线运行。2016年6月，接到用户反映网站无法访问，提示需要升级浏览器，界面如图1所示。

故障分析

这个问题在我们预料之中。当初设计技术方案的时候，对浏览器的市场占有率做了调研，Net Application提供的数据显示，2015年11月市场上占有率最高的浏览器 是 IE11、Chrome、IE8和IE9，IE6和IE7加起来只占有大约1.4%的份额，况且微软在2014年就宣布停止对低版本浏览器的支持，强制要求用户升级到最新版本的浏览器。为了能给大多数用户提供更好的用户体验，我们在网站设计时采用了HTML5+CSS3的技术框架，没有考虑对IE6和IE7的兼容。如果个别用户使用了IE6或者IE7，就会显示图1所示界面。具体实现方式是在网页的标签中加入如下语句：

图1 提示信息

这个语句就是对客户端浏览器版本做了判断，一旦用户使用的浏览器版本低于IE7，就跳转到window.location.href=后面的链接。

反映网站无法访问的用户表示自己计算机基础较差，不会升级浏览器。考虑到现在还在用IE6和IE7的用户大多数都属于此类情形，笔者觉得有必要为此类用户提供网站浏览服务。

故障解决

笔者将标签中增加的那句话去掉，然后用IE浏览器的开发者工具将浏览器模式调到IE7，发现网站首页布局出现了较大的错乱现象。

为了不影响IE6和IE7用户的正常使用，笔者用HTML4重新做了一个首页，命名为index4.html，放在网站根目录下。然后在网站首页的标签中加上如下语句：

于是IE6和IE7可以正常访问网站了。

经验总结

IE浏览器的兼容性一直都是从事前端设计不可避免的问题，因为我们的网站具有受众广泛的特点，对于市场占有率较低的浏览器也要能做到兼容。笔者在本案例中主要解决了首页样式错乱的问题，其他页面样式也有些问题，但是考虑到所有页面都兼容成本太高，为少数用户能够提供基本的内容浏览即可。