Safari和Chrome的标签渲染差异源于UA样式和继承逻辑不同，而非渲染引擎相同；Chrome自2013年起使用Blink，Safari仍用WebKit，二者默认背景色虽同为#ff0，但在padding、line-height继承、打印样式及深色模式适配上存在明显不一致。
HTML5 的 标签在 Safari 和 Chrome 中渲染一致，但行为细节和样式继承有差异，根源不在“渲染引擎不同”——二者现在都用 WebKit（Chrome 早年已切换，Safari 一直用），真正影响表现的是默认样式实现和用户代理（UA）CSS 的细微差别。
为什么说“Safari 和 Chrome 渲染引擎相同”是个常见误解
Chrome 自 2013 年起已从 WebKit 分支出 Blink 引擎，而 Safari 仍使用 WebKit。虽然两者同源，但 Blink 已大幅重构，不再共享 WebKit 的 UA 样式表逻辑。这意味着： 的默认背景色、内边距、行高继承等，并非完全同步更新。
- Safari（WebKit）对
的默认background-color是#ff0（纯黄），且不重置line-height或vertical-align - Chrome（Blink）同样用
#ff0，但部分版本会轻微调整padding（如上下加 1px），且更严格继承父级font-size和line-height - 二者均未给
设置display（保持 inline），但若父元素是flex或grid容器，Safari 对 inline 元素的基线对齐处理略保守
差异几乎全来自 UA 样式和继承链，而非 HTML5 规范本身。直接查看浏览器开发者工具的 “Computed” 面板，会发现以下典型不一致：
-
background-color：均为rgb(255, 255, 0)，但 Safari 可能因色彩配置文件（如 Display P3）轻微偏亮 -
padding：Chrome 默认有padding: 0 2px；Safari 多为padding: 0，导致文字贴边更紧 -
font-size继承：当套在或内时，Chrome 更倾向于缩放背景区域，Safari 可能只缩放文字、背景溢出 - 打印样式：Safari 默认打印时移除
背景；Chrome 保留——这点常被忽略，影响 PDF 导出效果
如何写出兼容的
不要依赖默认表现。显式重置关键属性是最稳妥的做法，尤其当需要跨浏览器对齐视觉或支持打印：
立即学习“前端免费学习笔记（深入）”；
mark {
background-color: #ffeb3b; /* 避免 #ff0 在深色模式下不可读 */
padding: 0.1em 0.3em;
border-radius: 2px;
line-height: 1.4;
}
@media print {
mark {
background-color: transparent;
text-decoration: underline wavy #ff5722;
}
}- 必须设
padding：否则 Safari 下文字紧贴背景边缘，Chrome 下略松散，统一后视觉可控 - 避免用
em单位做padding：在嵌套缩放文本中，Safari 解析em相对性更“字面”，Chrome 更“布局感知”，推荐用rem或固定像素 - 深色模式适配：原生
#ff0在暗背景下几乎隐形，#ffeb3b或#ffc107更可靠
真正难处理的不是颜色或大小，而是当 出现在 contenteditable 区域、或与 getSelection() / Range 操作混用时，Safari 对 DOM 边界和光标位置的判定逻辑和 Chrome 不一致——这部分没有标准兜底，得靠实际测试 + setTimeout 微调光标恢复。
