先唠唠咱为啥栽进这个兼容臭水沟
咱先掏心窝子哈——作为一个折腾过三四个企业站、用烂过EyouCMS所有免费模板的“踩坑专业户二代目”（一代目是我那只会套模板不懂技术的前老板），这个EyouCMS浏览器兼容问题解决的坑，我去年栽进去三次，每次都是老板拿着客户手机跳脚喊“我朋友圈那老兄弟怎么看不到首页轮播图！”“客户用360极速搜咱公司怎么像进了80年代录像厅修复失败现场！”
那时候的我啊，简直像热锅上的蚂蚁——还是被浇了半桶酱油的那种，慌不择路搜了一堆教程，不是全是代码天书看不懂，就是改了之后Chrome炸了Firefox疯了，整个站成了四不像。后来痛定思痛啃了三天啃不动的前端入门书边角料（别笑，入门书中间全是Vue React的时髦玩意，咱这种搞套模板加小改的，只配啃兼容IE6的边角料凑数），还蹲了好几天EyouCMS官方论坛的“兼容碎碎念专区”（别搜了，是我给那堆吐槽兼容帖起的外号），终于把这个兼容臭水沟的盖子掀开了！
咱先给兼容臭水沟拍个X光片，看看病根在哪
其实说白了，EyouCMS浏览器兼容问题解决的核心病根，就是模板的锅！别听网上那些瞎掰扯的，说什么“EyouCMS本身内核太老不兼容”——内核要是老，EyouCMS官方爸爸早就凉透了还能活到现在？
都是咱这些套免费模板的人贪小便宜惹的祸！免费模板是什么？就是二手市场淘来的2018款iPhone X，看起来是个旗舰机壳子，里面的电池、系统全是翻新拼凑的，不是iOS10就是越狱改的乱七八糟的版本，换个新充电器（比如最新的Chrome）能凑合用，但换个诺基亚的充电头（比如旧IE8、9）直接就黑屏关机没反应！
具体到模板的“翻新问题”，主要有这三个：
- 模板里用了太多HTML5/CSS3的“时髦黑科技”，但没给IE8、9这些“老古董手机”配“万能充电宝”（兼容前缀）
- 模板的图片轮播、下拉菜单这些“核心APP”，都是用的jQuery 3.0以上的版本，jQuery 3.0以上早就把IE8、9这些“老古董手机”拉黑了，连个启动权限都不给
- 模板的字体引用、视频插入，都是用的只有“新新人类”才看得懂的“火星文格式”（新的API），IE8、9这些“老古董”根本认不出来
病根找到了，接下来咱们就对症下药，搞个“土味兼容三件套”，保证旧IE/360极速双标浏览器都能乖乖听话，咱老板以后再也不会拿着客户手机跳脚喊救命了！
土味兼容三件套第一套：给时髦黑科技配万能充电宝
时髦黑科技是什么？就是咱CSS3里的border-radius（圆角）、box-shadow（阴影）、transform（变形）这些玩意，放在Chrome、Firefox这些“2024款iPhone 15 Pro Max”上，简直是锦上添花，但放在IE8、9这些“2008款诺基亚N95”上，就是画蛇添足——甚至连蛇都画不出来！
万能充电宝是什么？就是咱前端界祖传的兼容前缀（-webkit-、-moz-、-ms-、-o-）！
啥？你说不会加前缀？别急别急，咱是过来人，给你推荐个“自动加前缀的土味工具人”——Autoprefixer插件！啥？你说不懂VS Code装插件？也别急别急，咱还有EyouCMS官方论坛里大神写的“土味一键加前缀代码”，直接粘贴到模板的标签里就行，保证给所有时髦黑科技都配上最新的万能充电宝！
等下等下，重点重点！一键加前缀代码我给你贴在下面了，操作的时候一定要注意：
- 先把模板备份一遍！先把模板备份一遍！先把模板备份一遍！重要的事情说三遍，咱可是过来人，上次忘了备份，改完之后站直接成了白板，老板扣了我半个月的奶茶钱！
- 一键加前缀代码要粘贴在模板所有CSS文件引入的前面！
```html
```
怎么样？这个土味工具人是不是很贴心？一键就能给所有时髦黑科技加上万能充电宝，旧IE/360极速双标浏览器再也不会认不出来这些玩意了！咱老板上次看到这个效果，直接奖励了我一杯加珍珠加椰果加芋圆加奶盖的超级大杯奶茶！
土味兼容三件套第二套：给核心APP换个旧版本
核心APP是什么？就是咱EyouCMS模板里的jQuery库、图片轮播插件、下拉菜单插件这些玩意，放在IE8、9这些“老古董手机”上，要是用的是3.0以上的版本，直接就黑屏关机没反应！
旧版本是什么？就是jQuery 1.12.4版本！jQuery 1.12.4版本可是前端界公认的“IE8、9救星”，不管你是多么老的“古董手机”，它都能完美兼容！
啥？你说不会换jQuery版本？别急别急，咱还是过来人，给你详细讲一下操作步骤：
- 第一步：先打开EyouCMS的后台，点击左侧菜单栏的“模板管理”→“默认模板管理”→找到你的首页模板（一般是index.htm）→点击“编辑”按钮
- 第二步：在首页模板的标签或者标签的最后面，找到jQuery库的引入代码，一般是这样的：
```html
```
- 第三步：把jQuery库的版本号改成1.12.4，也就是这样：
```html
```
- 第四步：点击“保存”按钮，然后去前台刷新一下页面，检查一下图片轮播、下拉菜单这些核心APP是不是都能正常用了！
等下等下，还有个重点重点！要是改了jQuery版本之后，核心APP还是不能正常用怎么办？别慌别慌，咱还有个“备用旧版本核心APP库”——就是EyouCMS官方论坛里大神整理的“兼容IE8、9的插件大全”！你可以去里面找一个和你现在用的插件功能差不多的旧版本插件，直接替换掉就行！
咱上次就是用的这个方法，替换了一个图片轮播插件，直接就解决了老板那个老兄弟看不到首页轮播图的问题！那个老兄弟后来还给咱老板打电话夸咱公司网站做得好，老板一高兴又奖励了我一杯超级大杯奶茶！
土味兼容三件套第三套：给火星文格式换个地球人格式
火星文格式是什么？就是咱EyouCMS模板里的字体引用、视频插入这些玩意，用的是只有“新新人类”才看得懂的“WOFF2字体格式”“H.265视频格式”“webp图片格式”，IE8、9这些“老古董”根本认不出来！
地球人格式是什么？就是TTF字体格式、MP4视频格式、JPG/PNG图片格式！不管你是多么老的“古董手机”，它都能完美兼容！
啥？你说不会换格式？别急别急，咱还是过来人，给你推荐几个“土味格式转换工具人”：
- 字体格式转换：在线字体转换器（随便搜一个就行，比如“在线字体转换ttf woff2”），直接上传你的WOFF2字体，就能转换成TTF字体
- 视频格式转换：格式工厂（这个工具人简直是土味格式转换界的扛把子，啥格式都能转），直接上传你的H.265视频，就能转换成MP4视频
- 图片格式转换：在线图片转换器（随便搜一个就行，比如“在线图片转换webp jpg”），直接上传你的webp图片，就能转换成JPG/PNG图片
格式转换好了之后，接下来咱们就把模板里的火星文格式换成地球人格式，操作步骤很简单，咱就不详细讲了，就是找到对应的引用代码，把格式后缀改一下就行！
等下等下，还有个重点重点！要是你想同时保留“新新人类”看得懂的火星文格式和“老古董”看得懂的地球人格式怎么办？别慌别慌，咱还是过来人，给你贴一个“兼容两种格式的图片插入代码”：
```html
```
怎么样？这个兼容两种格式的代码是不是很贴心？既能让“新新人类”浏览器加载更快的WEBP图片，又能让“老古董”浏览器加载正常的JPG图片！咱老板上次看到这个效果，直接奖励了我一杯加珍珠加椰果加芋圆加奶盖加奥利奥碎的超级超级大杯奶茶！
最后再唠唠咱的土味正能量心得
好了好了，土味兼容三件套咱都讲完了，咱再掏心窝子唠唠咱的土味正能量心得——EyouCMS浏览器兼容问题解决，其实根本不是什么难事，只要咱肯花一点时间，肯去踩一点小坑，就能完美解决！
别听网上那些瞎掰扯的，说什么“搞兼容的都是大神，咱这种搞套模板加小改的根本搞不定”——大神也是从踩坑专业户一代目二代目过来的，咱只要肯学，肯动手，就能成为大神！
还有还有，别贪小便宜套那些乱七八糟的免费模板——免费的东西往往是最贵的，上次咱套了一个免费模板，改了三天兼容，老板扣了我半个月的奶茶钱，要是咱当时花个几十块钱买一个官方认证的兼容模板，早就省下那三天的时间和半个月的奶茶钱了！
好了好了，今天的分享就到这里了，希望咱的土味兼容三件套能帮到你，希望你以后再也不会栽进这个兼容臭水沟里，希望你老板以后能天天奖励你超级超级大杯奶茶！
要是你还有什么关于EyouCMS浏览器兼容问题解决的问题，欢迎在评论区留言，咱是过来人，一定帮你解答！
