微信iOS/Android的X5内核需手动添加-webkit-等前缀，flex布局须声明四套display及box-pack/box-align，placeholder需三套伪类+font-weight:normal，滚动条、tap高亮、选中文本需重置，viewport需viewport-fit=cover并降级适配安全区域，CSS前缀必须置于标准属性之前。
微信浏览器在 iOS 和部分 Android 机型上仍广泛使用 X5 内核（基于旧版 WebKit），很多 CSS 表现和标准行为不一致。直接写标准属性，flex、placeholder、scrollbar、input 等都可能失效或错位——必须显式加 -webkit- 前缀，且顺序、组合、fallback 缺一不可。
flex 布局在低版本 X5 内核中不生效
安卓 4.3、iOS 8–9、华为 EMUI 早期系统等，display: flex 完全被忽略，子元素堆叠或塌陷。仅靠 Autoprefixer 不够，它不会补老式 display: -webkit-box 语法，也不处理 box-pack/box-align 这类已废弃但必需的声明。
- 容器必须同时声明四套 display：
display: -webkit-box、display: -ms-flexbox、display: -webkit-flex、display: flex - 主轴对齐不能只写
justify-content: center，要叠加-webkit-box-pack: center和-ms-flex-pack: center - 交叉轴对齐同理：
-webkit-box-align: center+-ms-flex-align: center+align-items: center - 若子元素是
<span></span>或<a></a>这类 inline 元素，老内核下box-flex不起作用，必须先设display: block或display: -webkit-box
placeholder 和 input 默认样式无法覆盖
iOS 微信中 ::-webkit-input-placeholder 失效很常见，尤其在 <textarea></textarea> 或页面动态插入的 input 上；Android 某些 X5 版本则完全忽略伪类，或 placeholder 文字颜色/字体大小不响应 CSS。
- 必须写全三套伪类：
::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder，缺一不可 - iOS 下 placeholder 有时会被系统强制加粗，需额外加
font-weight: normal !important - 禁用 input 圆角（如 iOS 下拉框）必须配对写：
-webkit-appearance: none+border-radius: 0，单写前者无效 - Android 部分机型 placeholder 透明度异常，可试
opacity: .8覆盖默认值
滚动条、tap 高亮、选中文本等 WebKit 特有行为
这些不是“bug”，而是 X5 内核保留了 Safari 早期私有实现逻辑。不主动重置，就会出现灰色遮罩、拖拽时文字被选中、滚动条突兀显示等问题。
微信公众号推文写作与发布助手。支持深度文章撰写（1500+ 字）、智能配图搜索、API 配置引导、草稿箱上传、一键排版等全流程功能。 每篇文章默认 1500 字以上，配备 1 张相关配图（放在第一段后），包含清晰的分段标题结构。
立即学习“前端免费学习笔记（深入）”；
- 隐藏滚动条只写
overflow: hidden不够，要加element::-webkit-scrollbar { display: none } - 点击按钮/链接时的灰色半透明高亮，必须设
-webkit-tap-highlight-color: rgba(0,0,0,0)，transparent在某些 X5 版本里无效 - 禁止长按选中文本，
user-select: none要搭配-webkit-user-select: none，否则 iOS 微信仍可触发 - iOS 页面滚动卡顿，
-webkit-overflow-scrolling: touch是必需项，且只能加在有overflow: auto/scroll的直接父容器上
viewport 和安全区域适配常被忽略的细节
很多人写了 <meta name="viewport"> 就以为万事大吉，但在 iPhone X 及以后机型，微信 WebView 默认把内容限制在“安全区域”内，顶部状态栏和底部 Home Indicator 区域留白，导致 banner 被切掉、fixed 按钮悬空。
-
viewport-fit=cover必须显式声明：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 配合 CSS 使用
env(safe-area-inset-top)等环境变量，但注意：X5 内核对env()支持极差，iOS 11.2+ 才稳定，旧版必须降级为padding-top: 20px+ UA 判断 - 部分 Android X5 内核会错误解析
minimum-scale=0，导致双击缩放失效，应统一用minimum-scale=1 - 微信内置浏览器对
user-scalable=no的支持不稳定，真机测试发现某些版本仍可通过双指张开触发缩放，需 JS 辅助监听touchmove并preventDefault
最易被忽略的是：X5 内核的 CSS 解析顺序和优先级与标准 WebKit 不同，-webkit- 声明如果写在标准属性之后，反而会被忽略；所有带前缀的规则，必须放在对应标准规则之前。另外，@supports 在 X5 中基本不可用，不要依赖它做特性检测。
