html跨系统渲染差异源于浏览器内核、默认样式、编码解析及文件读取方式差异；需统一box-sizing、字体栈、表单行为、编码格式（utf-8无bom）并规范meta charset位置。
HTML 标签在不同系统渲染差异的根源
跨系统写 HTML 语句不兼容，根本原因不是语法错误，而是浏览器内核、默认样式表（user agent stylesheet）、字符编码解析逻辑、甚至文件读取方式（如换行符 CRLF vs LF）在 Windows/macOS/Linux 或 iOS/Android 上存在细微但关键的差异。比如 <input type="date"> 在 Safari 和 Chrome 中控件样式完全不同，且 Android WebView 可能直接回退为文本框。
避免被系统字体/排版破坏布局的关键写法
系统默认字体栈、行高、box-sizing 默认值（content-box vs border-box）在各平台不一致。不显式声明就等于把渲染权交给不可控变量。
- 始终在 CSS 开头加
* { box-sizing: border-box; }，否则 padding 会撑大元素尺寸，尤其在旧版 Android 浏览器中更明显 - 用
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;覆盖系统默认字体链，避免 macOS 渲染成苹方、Windows 渲染成微软雅黑时字宽突变导致换行错位 - 对
<textarea></textarea>显式设置line-height和resize，否则 iOS Safari 会忽略height并允许任意拖拽，而 Windows Edge 可能固定不可缩放
form 提交与事件在移动端的隐性陷阱
移动端浏览器对 form 的 submit 行为、键盘回车触发逻辑、以及 input 的 focus/blur 时机处理更“激进”，容易导致表单未提交、重复提交或焦点丢失。
- 不要依赖
onsubmit里return false阻止默认行为——iOS Safari 有时会忽略，改用event.preventDefault()并确保绑定在原生submit事件上 -
<input type="number">在部分 Android 系统中会触发中文输入法，导致输入非数字字符；需配合inputmode="numeric"+pattern="[0-9]*"+ JS 拦截input事件做二次过滤 - 移动端软键盘弹起后，
window.innerHeight会变化，若用它计算滚动定位（如聚焦后滚动到 input），需监听resize和focusin双事件，且加防抖
字符编码与文件保存方式引发的乱码问题
HTML 文件本身若未正确声明编码，或编辑器以错误编码保存（如 UTF-8 with BOM 被某些 Linux 工具误读），会导致 <meta charset="utf-8"> 失效，中文注释、占位符文字全变成 。
立即学习“前端免费学习笔记（深入）”；
- 所有 HTML 文件必须以纯 UTF-8（no BOM）格式保存，VS Code / Sublime Text / WebStorm 均可在右下角状态栏点击编码名切换并“Save with Encoding”
-
<meta charset="utf-8">必须位于最前面，且不能有任何字符（包括空格、BOM、注释）在它之前，否则浏览器会跳过识别 - 服务端返回的 HTTP
Content-Typeheader（如text/html; charset=utf-8）优先级高于 meta 标签，Nginx/Apache 需确认配置未覆盖或遗漏
最常被忽略的是：HTML 语句本身没问题，但构建工具（如 Vite/Webpack）在注入 HTML 模板时可能自动添加注释或空格，破坏 <meta charset> 位置；还有就是本地双击打开 HTML 文件（file:// 协议）时，Chrome 会忽略 meta charset，只认文件实际编码——这时候只能靠编辑器保存方式兜底。
