HTML与CSS代码在JSFiddle运行正常 本地运行样式异常怎么解决？

可能的原因 #

• 缺少标准DOCTYPE声明：在线编辑器会自动补全<!DOCTYPE html>声明，本地页面如果未添加该声明，浏览器会触发怪异模式（Quirks Mode），Bootstrap 4基于标准模式设计的样式规则在怪异模式下会完全失效，引发布局错乱。
• 缺失必填元标签：Bootstrap 4 正常运行必须依赖viewport元标签实现响应式适配，大部分在线编辑器会默认添加该标签，本地页面如果缺失<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">，会直接导致样式表现异常。
• 资源加载顺序错误：如果自定义CSS样式的引入位置早于Bootstrap CSS的引入位置，自定义样式会被Bootstrap默认样式覆盖，在线编辑器通常会将用户自定义样式放在第三方资源之后加载，因此不会出现该问题。
• 浏览器缓存影响：本地浏览器缓存的旧版资源可能未被更新，即使代码修改后也会加载旧的样式文件引发异常。

排查修复步骤 #

• 第一步：确认本地HTML文件首行添加了<!DOCTYPE html>声明，强制浏览器以标准模式渲染页面。
• 第二步：在标签最前端补全必填元标签，代码如下：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• 第三步：调整资源加载顺序，先引入Bootstrap CSS文件，再引入自定义CSS样式；JS类资源建议放在标签末尾引入，避免阻塞页面渲染。
• 第四步：打开浏览器开发者工具的网络面板，刷新页面确认所有第三方资源（Bootstrap CSS、JS、jQuery）的状态码为200，不存在加载失败的情况。
• 第五步：导出在线编辑器生成的完整页面源代码，和本地页面代码做逐行对比，补全本地缺失的基础标签即可解决差异问题。

内容的提问来源于stack exchange，提问作者Dasa Sathyan