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 解析器直接跳过未知属性名。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远提供降级值：写成
color: #333; color: var(--primary-color);，而非只写后者 - 避免在
@keyframes或媒体查询条件中使用变量（Safari 9–12 不支持） - 构建时用 PostCSS 插件（如
postcss-css-variables）静态替换简单变量，但注意它无法处理 JS 动态赋值场景
字体加载与 font-display 在 Firefox 和 Chrome 中的行为分歧
font-display: swap 在 Chrome 中会立即显示回退字体，等自定义字体加载完再切换；Firefox 68+ 才完整支持，更早版本会忽略该声明，导致 FOIT（Flash of Invisible Text）；Safari 目前仍不支持 font-display，始终按默认策略（block）处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对核心文案（如标题），用
font-display: optional+ JS 检测字体加载状态，失败时主动切回系统字体栈 - 避免在
@font-face中混用不同格式（如同时写woff和woff2），某些安卓 WebView 会因解析顺序错乱而加载失败 - 用
document.fonts.load()+Promise.race()控制超时，比单纯依赖font-display更可控
最麻烦的不是“哪个属性不支持”，而是同一属性在不同引擎里语义微调——比如 contain: layout 在 Safari 中实际表现接近 contain: strict，但文档没写。这类细节只能靠真机 + DevTools 的 Rendering 面板反复验证，别信任何“兼容性表格”的乐观标注。
