制作模板网站时，不同浏览器存在兼容性问题，不同设备也有兼容性问题，这很让人头疼，好多开发者为此烦恼不已。不过别着急，接下来会给大家讲解决网站兼容性问题的方法。
理解差异
不同浏览器对CSS和JavaScript的支持程度有很大差异，老版本的IE浏览器，特别是IE9及以下版本，与Chrome、Firefox、Safari这些现代浏览器相比，差别非常明显，我之前做过一个项目，在Chrome上显示正常，在IE里样式却全乱了。要解决兼容性问题，首先得了解这些差异，我们需要清楚各浏览器的特性 。
标准CSS
编写样式时，需遵循W3C的Web标准，要使用标准的CSS属性，这就像建房子得依照规范进行，如此能确保基本的兼容性，在电商网站项目里，按标准写CSS，页面在主流浏览器上的显示会基本一致，这为后续工作省去不少麻烦，遵循标准还能让代码更易维护，能提高开发效率。
添加前缀
有些CSS特性是需要添加前缀的，比如Flexbox、CSS Grid 。不同浏览器的前缀不一样，像webkit、moz、ms等 。我在做响应式布局时，要给这些属性加上不同前缀，不然在某些浏览器显示会不正常 。添加前缀能让网站在不同浏览器都有良好的显示效果 。
使用polyfills
旧浏览器无法支持现代Web特性，这种情况下可用polyfills模拟，比如用ES6转ES5的工具处理JavaScript代码，或者用Flexie支持老浏览器的Flex布局，我曾给一个旧版系统的客户制作网站，运用polyfills解决了很多兼容性问题，确保老浏览器能正常使用新特性。
响应式设计
要使网站能适应不同的屏幕以及设备，那就需要采用响应式设计，借助媒体查询去调整在不同设备上的布局与样式。我为一家餐饮企业制作网站时，依据手机、平板、电脑等不同设备，运用媒体查询来调整样式，如此一来，不管用户使用哪种设备访问网站，体验都良好。这样便能够满足不同用户的需求，覆盖更多的人群。
能够借助BrowserStack测试网站在不同浏览器以及不同设备上的表现，也能够利用Selenium进行此项测试，还能够运用Chrome的设备模拟功能做这件事。上次我做一个政务网站时，通过这些工具测试，发现了不少隐藏的兼容性问题。使用这些工具，能够提前发现问题，防止网站上线后出现状况，进而提升用户体验。
特定样式
对于IE等特定浏览器，可运用条件注释，新IE版本不支持条件注释，不过旧版有效，还可运用特定的CSS hack来应用兼容性样式。有一个老项目需要兼容IE8，于是用条件注释写了特定样式，确保了在IE8上的显示效果。这种方法能够精准解决特定浏览器的兼容性问题。
框架与库
成熟的前端框架与库，比如Bootstrap、Foundation，一般已处理了大部分兼容性问题。我开发个人博客时选用了Bootstrap，在多种浏览器以及设备上都无需担忧兼容性。运用框架和库能够节约开发时间，还能够提升兼容性。
渐进增强
首先要确保网站在所有浏览器上都具备基本功能，然后针对现代浏览器增添高级特性与效果。拿一个新闻网站来说，先是在所有浏览器上达成文章显示功能，接着给Chrome等现代浏览器添加图片特效。如此做能够顾及不同浏览器的用户，进而逐步提高网站质量。
用户测试
在网站正式上线以前，邀请了不同的用户来进行测试，这么做的目的是确保实际使用时具备兼容性。我制作了一个社区网站，让不同年龄的用户参与到测试当中，也让使用不同设备的用户参与测试，最终发现了好几个兼容性方面的问题。用户测试能够从实际使用的角度找出问题，进而进一步完善网站。
大家解决模板网站兼容性问题时，会碰到各种不同方面，那么最让人头疼的是哪一个方面？觉得这篇文章有帮助的人，要记得点赞，还要分享！