安卓微信X5内核对<mark>标签支持不完善，需显式重置样式、禁用字体缩放、避免嵌套与动态插入，并建议降级为<span class="highlight">实现高亮。
HTML5 `` 标签在安卓微信里变大、错位、颜色失效？
安卓微信 X5 内核对 `` 的默认样式重置不完整，会继承系统级字体缩放设置，导致文字撑开容器、背景色偏移、甚至整行换行。这不是你 CSS 写错了，是 X5 内核把 `` 当成「可缩放文本块」处理了。
- 必须显式重置所有继承样式：
mark { font-size: 1em; line-height: normal; vertical-align: baseline; background: #ff0; color: #000; padding: 0 2px; } - 禁用用户字体缩放影响：在
<head>加<meta name="viewport" content="text-size-adjust: 100%;">（iOS 也建议加） - 避免嵌套在
<span>或<strong>里使用——X5 对复合内联元素的盒模型计算容易出错
安卓微信里 `` 点击后闪退或白屏？
这通常不是 `` 本身的问题，而是触发了 X5 内核的渲染管线异常：当 `` 区域包含大量动态内容（如 Vue 响应式文本、频繁更新的 innerHTML），加上安卓微信对重排重绘敏感，就会卡死或崩溃。
- 不要用
v-html或innerHTML动态插入含 `` 的 HTML 片段；改用v-text+ CSS 类模拟高亮（如<span class="highlight">关键词</span>） - 若必须用原生 ``，确保其父容器有明确宽高和
overflow: hidden，防止布局抖动放大问题 - 禁用过渡动画：移除
transition相关样式，X5 对background-color的渐变过渡支持极差
为什么 iOS 微信正常，安卓就不行？
iOS 微信用的是 WKWebView（较新版本已升级），对标准 HTML5 元素解析更规范；而安卓微信长期依赖腾讯自研 X5 内核，它基于旧版 Blink，对语义化标签的样式隔离做得弱，且会把 `` 和系统字体设置强行耦合。
- 检测是否为安卓微信 X5：
isWechatInX5() && /Android/i.test(navigator.userAgent) - 针对性降级：安卓微信下用
document.createElement('mark')判断是否支持，不支持则自动替换为<span>+ class - 别信“加 -webkit- 前缀就能修好”——X5 不认大部分 WebKit 私有属性，硬加反而引发兼容冲突
本地开发时 `` 显示正常，真机微信里却乱套？
因为你大概率在 Chrome 模拟器或桌面浏览器调试，它们用的是完整 Blink/V8，而安卓微信 X5 的 JS 引擎和渲染层是阉割+魔改版，连 getComputedStyle(markEl).backgroundColor 都可能返回空字符串。
立即学习“前端免费学习笔记（深入）”；
- 真机调试必须用 HTTPS 域名访问，
http://localhost或http://192.168.x.x下的 `` 行为不可信 - 检查控制台是否报
TypeError: Cannot read property 'getComputedStyle' of undefined——这是 X5 在某些 DOM 就绪时机下无法获取样式对象的典型表现 - 最稳方案：放弃 ``，统一用
<span class="hl">+ CSS 实现，可控性高、无内核差异
X5 内核对语义化标签的支持不是“有没有”，而是“什么时候、在哪种上下文里才可靠”。与其花时间 patch <mark>，不如用 class 控制，省下的调试时间够你优化三处首屏加载。
