近期不少政企项目在验收阶段遇到同一个现象:系统在开发环境用常见浏览器演示正常,换到国产浏览器后,页面样式错位、按钮点不动、附件传不上去。政策层面,各级政务信息化建设普遍要求新建系统适配国产浏览器与国产终端环境,这一要求通常写在招标文件或验收条款中。
问题往往不是整个系统都坏,而是集中在少数几类页面上。下面按「先定位页面类型、再逐项排查」的顺序展开,帮助信息化负责人和前端开发把排查范围收窄。
先判断是整体不兼容还是某几类页面不兼容
第一步不要急着改代码,先做页面分类。用国产浏览器把系统主流程走一遍,按页面类型记录表现:哪些页面完全正常,哪些页面样式错乱,哪些页面功能失效。这样能把问题从「浏览器不兼容」收窄到具体页面类别。
常见做法是准备一份页面清单,覆盖登录、首页、业务表单、列表查询、统计报表、附件上传下载、打印导出这几类。每类挑一两个代表性页面测试即可,不必全量铺开。
排查方向一:登录与单点登录页面
登录页是兼容问题的第一站。国产浏览器对插件、证书、跳转的处理方式与常见浏览器存在差异,单点登录的跳转链路容易在这里断掉。
- 检查登录框、验证码、密码强度提示的样式是否错位。
- 确认单点登录跳转后能否正常回跳,会话是否保持。
- 涉及数字证书或UKey的场景,确认浏览器对控件的调用方式是否被支持。
这一块通常需要与统一身份认证平台的建设方一起确认,单靠前端改样式解决不了跳转链路的问题。
排查方向二:复杂表单与控件密集页面
业务表单里往往堆了日期选择、下拉树、富文本、文件上传等控件。国产浏览器内核对部分脚本特性的支持节奏与常见浏览器不同,控件越密集,出问题的概率越高。
排查时可按控件类型逐个隔离:先确认基础输入框和下拉框,再测日期与时间控件,最后测富文本和文件上传。找出是哪一类控件失效,比笼统地说「表单不能用」更有助于修复。
排查方向三:列表、分页与大数据量展示页
列表页的问题常表现为分页点不动、滚动加载卡住、固定列错位。原因多与脚本执行效率、样式渲染方式有关,尤其在数据量较大时更明显。
建议在国产浏览器上单独测一次分页、排序、筛选的组合操作,并观察控制台是否有报错。若只有大数据量时出问题,优先检查渲染方式而不是逐个改样式。需要从架构层面处理这类问题时,可以参考我们的软件定制开发与系统集成服务中的前端适配做法。
排查方向四:统计报表、图表与打印导出页
报表页依赖图表库和打印样式,是兼容问题的高发区。国产浏览器对打印边距、字体、画布渲染的处理可能不同,导致导出PDF或直接打印时排版走样。
排查顺序建议是:先看图表能否正常绘制,再看打印预览的排版,最后测导出文件的打开效果。三者要分开记录,避免把打印问题和图表问题混在一起。
排查方向五:附件上传下载与在线预览页
附件环节涉及本地文件选择、在线预览插件和下载行为。国产浏览器对文件选择框、预览插件的支持方式存在差异,容易出现「选了文件没反应」或「预览白屏」。
这一类问题通常与浏览器安全策略有关,建议与浏览器厂商的技术支持确认可用的调用方式,同时在页面上给出明确的失败提示,而不是静默失败。政府与国企场景下的适配经验,可参见政府与国企国产化改造案例。
逐项排查顺序建议
如果不想盲目试错,可以按下面的顺序推进,先排除影响面最大的问题:
- 先测登录与单点登录链路,确认能进得去系统。
- 再测主流程表单,确认核心业务能提交。
- 接着测列表与分页,确认数据能查得到、翻得动。
- 然后测报表与打印导出,确认结果能交付。
- 最后测附件上传下载与在线预览,确认材料能流转。
- 以上都通过后,再回头处理样式错位等观感问题。
这个顺序的原则是先保功能、后修样式,避免在细节样式上耗掉时间,却漏掉关键业务阻断。
预防措施:把兼容性要求前置到需求与验收
比起上线后补救,更省事的做法是在项目早期就把浏览器适配写进需求与验收标准。具体可以落到三件事上。
- 在需求调研阶段明确目标浏览器清单和终端环境,作为非功能需求写入方案。
- 在开发联调阶段安排一轮国产浏览器回归测试,把问题挡在上线之前。
- 在验收阶段把页面分类清单作为测试用例附件,逐类签字确认。
我们在一站式交付中,通常把需求调研、POC验证、开发联调、上线验收各阶段都安排对应的环境测试,具体流程可查看服务范围与交付流程。涉及旧系统改造时,前端适配往往和接口调整一起做,避免反复返工。
可直接照做的兼容性问题检查清单
把下面这份清单打印出来,按页面类型逐项打勾即可:
- 登录页:样式正常、验证码可刷新、单点登录可回跳、会话保持正常。
- 表单页:基础输入可编辑、日期控件可选、富文本可保存、必填校验可触发。
- 列表页:分页可点击、排序筛选生效、大数据量下滚动不卡死。
- 报表页:图表正常绘制、打印预览排版正确、导出文件可打开。
- 附件页:文件可选择、上传进度可见、下载与在线预览正常。
- 公共部分:页面无控制台报错、弹窗层级正确、返回与刷新行为一致。
清单之外还有一条经验:每次国产浏览器内核更新后,挑主流程再走一遍,能提前发现新引入的兼容问题。若需要结合具体系统评估改造范围,可以联系我们做一次针对性的页面梳理。