咱先唠点实在的,我上个月刚帮客户把跑了9年的PHPCMS老站做完phpcms低版本浏览器兼容修复,头发掉了快三十根,踩的坑装了满满一购物车,今天全给你们抖出来,省得你们跟我似的熬到凌晨三点还在拍桌子骂IE。
可能有人要杠啊,现在都2024年了谁还用IE8、IE9这种老掉牙的浏览器?我一开始也是这么想的,直到客户甩过来一张截图,他们单位内网200多台电脑全是Win7自带的IE8,人集团统一管控不让升级,你敢说一句“要不你们换浏览器”,人直接给你项目款打八折你信不?说白了,只要你的PHPCMS站要服务政企、传统企业、中老年用户群体,phpcms低版本浏览器兼容修复就是你绕不开的坎,躲都躲不掉。
这坑我第一个踩的,当时写交互图方便,全用的箭头函数、let、模板字符串,结果扔到IE8里一看,控制台红得像过年贴的对联,全是语法错误。你就想啊,老IE跟你那七十岁的爷爷似的,你跟他说什么“yyds、emo、打call”他听得懂才怪,他只会觉得你这孩子是不是魔怔了。
解决方法也简单,给老IE配个“翻译机”就行,在所有JS文件之前引入babel-polyfill和es5-shim系列垫片,帮你把ES6+的新语法全翻译成老IE能认的ES5语法,我把我用的CDN地址放这,你们直接抄就行:
```html ```对了提醒一句,别用2.x以上版本的jQuery,人家从2.0开始就放弃IE8支持了,我一开始傻呵呵用了3.6的jQuery,结果全站JS直接瘫痪,折腾了半天才反应过来,换成1.12.4版本的jQuery立马就好,这都是phpcms低版本浏览器兼容修复踩出来的血的教训。还有改完代码一定要去PHPCMS后台清缓存,我那天傻呵呵测了一个小时,怎么改页面都没变化,最后才想起没清缓存,差点给自己一巴掌。
解决完JS的问题我还没高兴十分钟,一看样式直接傻了,导航栏本来是横向的,在IE8里直接堆成了竖的,圆角按钮变成了方的,阴影半透明效果全没了,整个页面土得像十年前的非主流空间。这就好比你穿了个露腰的辣妹装去奶奶家,奶奶非觉得你冷,硬给你套了三层棉马甲,能好看才怪。
解决这个问题分两步走,首先给所有CSS3属性加上兼容前缀,要是你用了构建工具直接装个autoprefixer,自动给你补全-webkit-、-moz-、-ms-这些前缀,要是没搞构建工具就手动加,或者引入prefixfree.min.js帮你自动补。针对IE8这种冥顽不灵的,咱直接写单独的hack,给它开小灶:
```css / IE8专属识别hack / @media \0screen { .nav-list { float: left; width: 100%; } .nav-item { float: left; margin-right: 20px; } / IE8不支持opacity就用滤镜替代 / .mask { filter:alpha(opacity=70); } } ```
我当时就是给flex布局的导航栏,单独给IE8写了浮动布局的样式,瞬间就正常了。还有啥透明度、圆角的问题,IE8不支持border-radius要么就切背景图,要么就干脆放弃圆角,反正老浏览器的用户也不会在意这个,能正常用就行,咱们做phpcms低版本浏览器兼容修复要抓主要矛盾,别死磕那些不重要的细节。
前面俩坑填完我以为要完工了,结果一测表单提交,直接报一堆错,原来是PHPCMS自带的表单验证插件和kindeditor编辑器版本太老,跟IE8兼容性不好。这就好比你家那用了十年的老插排,插个老电风扇没事,插个新手机充电器就冒火花,俩老家伙不对付。
解决方法也简单,把所有自带的第三方插件升级到支持IE8的最高版本,比如kindeditor就升到4.1.11,这是最后一个支持IE8的版本,别升太高,太高了反而不支持IE8。表单验证插件也换成兼容IE8的版本,或者干脆自己写个简单的验证逻辑,也比自带的那个老掉牙的插件靠谱。对了还有ajax请求,别用fetch,老IE根本不认,老老实实改用jQuery的$.ajax,稳得一批。
我知道很多人做完之后就随便用个浏览器的兼容模式测一下就完事了,我跟你说,那玩意不准!就像你隔着屏幕给你奶奶量血压,能准吗?我当时就是用Chrome的IE8模拟模式测完觉得没问题,结果客户那边一用还是报错,最后装了个Win7的虚拟机,用原生的IE8一测才发现是字符串的trim方法没兼容,加了个polyfill就好了。
所以一定要装个虚拟机,装纯净版的Win7甚至XP,用原生的IE7、IE8、IE9挨个测,所有页面都走一遍,列表页、内容页、搜索页、表单提交页,尤其是有交互的地方,按钮点一遍,表单提交一遍,甚至连分页、评论这些小地方都别放过,不然等客户找上门返工,那才是真的麻烦。
其实phpcms低版本浏览器兼容修复说难也真不难,难的是你有没有耐心去踩这些坑,我当时做的时候前前后后踩了七个坑,熬了两个大夜才搞定,但是搞定的那一刻,看着老IE8里的网站丝滑运行,客户给我发了个2000块的红包当辛苦费,那成就感真的没得说。
咱做技术的嘛,遇到问题别慌,办法总比困难多,你看我把phpcms低版本浏览器兼容修复的坑都给你踩完了,你照着来大半天就能搞定,要是中间碰到啥搞不定的,评论区留个言,我看到了都给你回,都是出来混的,能帮一把是一把,祝大家做phpcms低版本浏览器兼容修复都能一次过,不用加班!
下一篇: phcms点击排行标签调用技巧
易频IT社区是综合性互联网IT技术门户网站,专注分享网络技术、服务器运维、网络安全、编程开发、系统架构、云计算、大数据等行业干货,实时更新IT行业资讯、零基础教程、实战案例,为IT从业者、技术爱好者提供专业的学习交流平台。
Copyright © 2021-2026 易频IT社区. All Rights Reserved. 备案号:闽ICP备2023013482号 网站地图