跨浏览器渲染差异根因在html和CSS标准兼容性：DOCTYPE必须顶格写<!DOCTYPE html>，避免怪异模式；IE11不支持现代Grid，flexbox行为不一致，需降级方案；date输入框原生支持度低，应接受差异并用伪类反馈；viewport禁用缩放应优先用CSS而非meta。
chrome/firefox/edge 渲染不一致，先看 DOCTYPE 是否写对
没声明或写错 DOCTYPE，浏览器会退化到怪异模式（Quirks Mode），连盒模型、width 解释都不同。不是 CSS 问题，是 HTML 根子就歪了。
-
<!DOCTYPE html>必须顶格写在第一行，前面不能有空格、注释、bom 字符 - 别用
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01//EN">这类过时写法，现代浏览器对旧 DTD 的解析反而更不统一 - 用 VS Code 打开文件，右下角检查编码是否为
UTF-8 without BOM；BOM 会导致 IE/Edge 识别DOCTYPE失败
IE11 或旧 Edge 不认 flex / grid，得加前缀还是换思路？
不是所有“兼容”都要靠加前缀。CSS Grid 在 IE11 里用的是过时的旧语法，强行适配成本高、bug 多；Flexbox 虽支持，但 flex-wrap: wrap 和 align-content 行为和现代标准不一致。
- 如果目标用户含 IE11，
display: grid建议直接放弃，改用display: flex+ 媒体查询降级为Float或inline-block - 不要依赖 Autoprefixer 自动加
-ms-前缀——它对 IE 的 Grid 旧语法支持有限，且容易漏掉flex-direction: row-reverse等边缘 case - 用
@supports (display: grid)做特性检测比 UA 判断更可靠，但注意 IE11 完全不支持@supports，需配合 js 检测
input type="date" 在 safari 和 Firefox 显示成文本框，怎么处理？
这是标准行为，不是 bug。Safari 直到 16.4 才支持原生日期选择器，Firefox 至今不支持 type="date" 的 UI 控件（只做基础验证）。强行用 JS 模拟一个日历组件，不如接受“输入控件能力因浏览器而异”这个事实。
- 保留
<input type="date">，它仍能提供基础格式校验（如输入2023-13-01会报错）和移动端原生键盘 - 用
:valid/:invalid伪类做简单状态反馈，别依赖change事件在 Safari 中触发时机（它可能不触发） - 若必须统一 UI，优先选轻量库如
flatpickr，避免引入moment.js这类大依赖——日期格式化本身在各浏览器中Date.parse()行为就不一致
为什么加了 viewport meta 还在 ios Safari 上缩放异常？
常见原因是 user-scalable=no 被误加，或 maximum-scale 设为小于 1。iOS 13+ 对禁用缩放更敏感，部分页面会直接忽略该设置，但同时导致双击放大失效、表单聚焦时页面跳动。
立即学习“前端免费学习笔记（深入）”；
- 最简安全写法：
<meta name="viewport" content="width=device-width, initial-scale=1">，去掉所有maximum-scale、user-scalable - 如果真要禁用缩放（比如后台管理页），改用 CSS 锁定：
body { touch-action: manipulation; }，比 meta 更可控 - 注意：Safari 在横屏时可能重新计算
device-width，导致布局错位，建议用min-width配合媒体查询兜底
实际跨浏览器问题从来不是“写一次跑 everywhere”，而是每个浏览器都在 quietly 悄悄改规则——比如 Chrome 115 开始限制第三方 cookie 影响 document.referrer，Safari 17 对 IntersectionObserver 的阈值精度做了调整。这些细节不会报错，但会让逻辑在某个版本突然失效。