Safari和Chrome在iOS上渲染差异源于同用WebKit但UA样式、字体回退、深色模式逻辑及特性实现节奏不同；Flex换行、mark打印消失、date输入框行为、色彩与字体差异均需针对性修复。
为什么 Safari 和 Chrome 在 iOS 上渲染同一 HTML 会不一样
因为它们用的不是同一个引擎——iOS 上所有浏览器（包括 Chrome for iOS）都强制使用 WebKit，但 Safari 和 Chrome 的 UA 样式表、字体回退链、深色模式适配逻辑、以及对某些 HTML/CSS 特性的实现节奏不同。这不是“Chrome 换了内核就万事大吉”，而是苹果系统层面对 WebKit 的定制 + 浏览器自身 UA CSS 的叠加效应。
Flex 布局在 iOS Safari 15–16 中突然换行或溢出
这是高频踩坑点：Safari 15.4–16.6 对 flex 子项的 min-width 计算有偏差，尤其当子项含 <img alt="HTML文档在不同移动端浏览器（Safari/Chrome）的渲染差异" >、<input> 或 width: 100% 时，容器宽度会被错误撑开或子项强制折行。
- 给 flex 子项加
min-width: 0（文本/块内容）或min-width: fit-content（内联内容），强制重置收缩基准 - 避免在 flex 容器上同时设
width: 100%和flex-wrap: wrap，改用max-width: 100% - 用
@supports (display: -webkit-flex)单独为 Safari 加 fix，别靠-webkit-前缀全局覆盖
<mark> 背景在 Safari 打印时消失，Chrome 却保留
UA 样式表对 <mark> 的打印样式处理不一致：Safari 默认移除背景色，Chrome 保留。这直接影响 PDF 导出效果，且无法通过 @media print 简单覆盖（因为 UA 规则优先级更高）。
- 显式重写关键属性：
mark { background-color: #ff0 !important; padding: 0 2px !important; } - 打印场景下必须加
@media print { mark { background-color: #ff0 !important; } } - 注意 Safari 对
font-size继承更“保守”——套在<small>里时，背景可能不缩放，需手动设line-height: 1和vertical-align: middle
移动端 <input type="date"> 在 Safari 和 Chrome for iOS 表现分裂
iOS Safari 渲染原生日期选择器（带下拉箭头），而 Chrome for iOS 因受限于 WebKit，实际调用的是同一套 UI，但 JS API 行为有差异：比如 input.valueAsNumber 在 Safari 返回毫秒数，在 Chrome for iOS 可能返回 NaN；placeholder 也完全不显示。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
type="date"的 UI 或 JS 属性做关键逻辑，优先用type="text"+ 第三方日历库（如 flatpickr） - 若必须用原生，隐藏 Safari 箭头：
input[type="date"]::-webkit-calendar-picker-indicator { display: none; } - 验证时用正则匹配 ISO 格式（
^\d{4}-\d{2}-\d{2}$），而非依赖input.type === 'date'判断
最易被忽略的是字体回退和色彩空间：Safari 默认启用 Display P3 色彩配置，Chrome for iOS 却走 sRGB，同一段 background-color: #ff0 在真机上亮度差可超过 15%；而中文字体在 PingFang 和 SF Pro 间字重、字宽微差，会导致换行点偏移——这些没法靠 CSS 修复，只能靠真机测试+视觉回归校验。
