近期, 不少站长反馈, 其自身网站于Chrome、Edge最新版本上进行访问时, 所有情况都完全正常, 然而, 当用户运用IE11、旧版Safari或者低版本Firefox进行访问之际, 却出现白屏现象显现、JS报错呈现或者CSS样式错乱呈现。这实际上是前端兼容性的典型问题。接下来, 从三个核心方向给出排查方法以及可复用的修复代码。

1. HTTPS与TLS协议版本不匹配

像IE11这样的旧版浏览器，在Win7下的Chrome 49也属于旧版浏览器范畴, 它们并不支持TLS 1.2以及TLS 1.3, 然而你的服务器存在可能已将旧协议禁用的情况, 当用户进行访问的时候会直接报告“无法建立安全连接”。

排查方法：

对于服务器Nginx或者Apache配 置之内的ssl_protocols指令 , 进行核查。

使用在线SSL检测工具检查站点支持的TLS版本。

修复代码（Nginx示例）：

ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;  # 保留TLSv1.1兼容旧浏览器

2. JavaScript ES6+语法不兼容

支持let、const、箭头函数、模板字符串等ES6语法的不是旧版浏览器, 直接报语法错误的也不是旧版浏览器。

排查方法：

在浏览器控制台查看报错行号，定位未经过转译的现代语法。

查看, 用于打包的工具, 也就是在Webpack以及Vite之中关于target的相关配置。

修复代码（Babel转译配置示例）：

// .babelrc 或 babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 1%, last 2 versions, not dead, IE >= 11"
    }]
  ]
}

3. CSS Flex/Grid布局与旧引擎冲突

IE10以及IE11, 对于Flexbox的支持并不完整, 其对Grid布局则是完全不支持, 而旧版的Safari, 在gap属性方面存在着兼容问题。

排查方法：

使用Can I Use的网站, 就是那caniuse.com, 去检查所使用的那些CSS属性表现出来的兼容性情况。

在旧浏览器中打开开发者工具，查看样式是否被覆盖或无效。

修复代码（兼容性后备方案）：

/ 对旧浏览器使用float布局作为降级 /
.container {
  display: flex;           / 现代浏览器用Flex /
  / 针对IE10/11，用float替代 /
  float: left;
  width: 100%;
}
/ 或使用Autoprefixer自动添加浏览器前缀 /

总结建议：

于发布之前, 运用BrowserStack、或者运用LambdaTest, 对主流旧版浏览器予以测试。要是用户量比较大, 那么能够考虑在入口页面增添“浏览器升级提示”横幅, 以此引导用户进行更新。兼容性并非是一次性的工作, 培养在开发阶段就添加转译工具以及Polyfill的习惯, 这样能够大幅度降低后期修复成本。

否玩代码编辑, 网址 https://www.fouwan.com。