CSS样式在安卓设备应用不一致 手风琴菜单样式偶发失效如何解决

核心问题是你写的CSS选择器不符合语法规范，模拟器上正常纯属内核过度容错的巧合，真机上的浏览器/内嵌WebView（尤其是安卓厂商定制魔改的内核）选择器匹配逻辑更严格，加上DOM变化后的重绘机制差异，就会出现样式偶发生效偶发失效的问题。

你写的这段CSS：

.grid-item-1.title.active a{
    display: block;
}

无空格拼接的多类选择器，匹配规则是同时拥有grid-item-1、title、active三个类的同一元素，再找它内部的a标签。但看你的DOM结构，grid-item-1是外层父容器的类，title和active是内层子div的类，三个类根本不在同一个DOM节点上，符合规范的渲染引擎根本不会用这条规则匹配到任何菜单项。

另外你当前的交互逻辑本身也有缺陷：点击标题后直接给标题加display: none把触发元素本身隐藏，用户后续根本没有点击收起菜单的入口，部分安卓内核对这类触发元素直接消失的DOM突变处理有bug，经常会出现重绘不及时的问题。

1. 先修正错误的CSS选择器，用空格分隔类名表示层级/后代关系，也可以直接用兄弟选择器匹配菜单项，两个分类的逻辑可以复用，不用分别写.grid-item-1、.grid-item-2两套规则：

/* 默认隐藏所有菜单项 */
.grid-item-1 a, .grid-item-2 a {
  display: none;
}
/* 选中带active类的title后面的同级a标签，两个分类通用 */
.title.active ~ a {
  display: block;
}

如果要兼容安卓5.0以下的老旧WebView（这类设备对通用兄弟选择器~支持有bug），建议把active类加在点击标题对应的外层父容器（也就是grid-item-1/grid-item-2节点）上，不要加在内部的title节点上，选择器写法更稳妥：

/* 父容器带active类时，显示内部所有菜单项 */
[class*="grid-item-"].active a {
  display: block;
}
/* 激活状态的标题不要设为display:none，只需要加选中态样式即可，保留点击收起的入口 */
[class*="grid-item-"].active .title {
  font-weight: 600;
  /* 可以按需加展开箭头、背景色等样式 */
}

2. 如果修正选择器后还是偶现样式不生效的问题，是老安卓WebView的重绘bug导致的，在点击切换active类的回调里加一行强制触发重绘的逻辑即可：

// 标题点击事件回调内，切换完active类后执行
const target = /* 你绑定active类的那个节点，要么是title要么是父容器 */;
// 触发硬件加速重绘，无视觉副作用
target.style.transform = 'translateZ(0)';
requestAnimationFrame(() => {
  target.style.transform = '';
});

• 不要依赖浏览器的容错能力写不规范的CSS，桌面端、模拟器的内核通常更新快、容错逻辑多，真机尤其是安卓厂商定制的系统WebView魔改程度高，对不规范代码的容忍度极低。
• 交互过程中不要直接把触发事件的元素设为display: none，很容易导致事件冒泡中断、焦点丢失、内核重绘异常的问题。
• 移动端测试不要只依赖模拟器，模拟器用的是标准AOSP内核，和小米、华为、vivo等厂商定制的魔改内核对CSS、JS的执行表现差异很大。

内容的提问来源于stack exchange，提问作者Andrew Stepanenko