HTML5表单、Flex/Grid布局、CSS变量及字体加载在各浏览器中存在默认样式与行为差异，需通过降级写法、前缀规则、静态替换和运行时检测等策略保障一致性。
HTML5 表单控件在 Chrome/Firefox/Safari 中的默认样式差异
HTML5 新增的 、、 等控件，各浏览器渲染逻辑完全不同：Chrome 用 WebKit/Blink 内置 UI，Firefox 默认无美化（仅基础框线），Safari 对 type="date" 强制显示为下拉箭头且不支持 placeholder。这不是 bug，是规范未强制统一渲染的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖浏览器默认外观做 UI 一致性设计；对关键表单（如日期选择器），优先用
type="text"+ 第三方库（如 flatpickr）或自建弹层 - 若必须用原生
type="date"，需单独为 Safari 加input[type="date"]::-webkit-calendar-picker-indicator { display: none; }隐藏箭头，再用伪元素+JS 模拟触发逻辑 -
type="range"的轨道/滑块样式必须用::-webkit-slider-runnable-track、::-moz-range-track、::-webkit-slider-thumb等前缀规则逐个覆盖，无通用写法
Flex/Grid 布局在旧版 Edge 和 Safari 12–13 中的解析异常
Safari 12.1 及更早版本对 flex: 1 在 min-width: 0 缺失时会错误拉伸子项；旧版 Edge（EdgeHTML）不支持 gap 属性，且对 grid-template-areas 中空格换行敏感（多换行=解析失败）。这些不是“兼容性问题”，而是引擎实现阶段的语法容忍度差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
flex容器内可能收缩的内容（如文本、图片），显式加min-width: 0或overflow: hidden防止 Safari 溢出 - 避免在
grid-template-areas中写注释或跨行空格；用单行字符串定义，例如"header header" "main sidebar" - 用
@supports (gap: 0)包裹gap相关样式，并在不支持时 fallback 到margin计算（注意负 margin 抵消）
CSS 自定义属性（CSS Variables）在 IE 和部分安卓 WebView 中不可用
--primary-color 这类自定义属性在 IE 完全不识别，在 Android 4.4–6.0 的系统 WebView 中解析失败会导致整条声明被丢弃（连带后面的 color: var(--primary-color) 也会失效）。这不是“不支持变量”，而是 CSS 解析器直接跳过未知属性名。
