捉到 Edge 的渲染 BUG 一只

最近测试同学发现，用 Edge 浏览器，访问问卷的新版设置界面，部分联动锁总是显示异常，该锁的没锁，不该锁的又锁上了。

期初以为是 React 在 Edge 里面有什么 bug，一圈排查下来，发现状态、样式都是正确的，偏偏就是显示出来的很诡异，鼠标在上面晃动一下又正常了（浏览器绘制BUG，以前 IE7 也遇到过）。

这个 BUG 的特征，当使用 :disabled ~ label 这种伪类 + 相邻元素进行样式定义的时候，如果动态修改 input.disabled 的值，其对应的 label 的表现就不会更新。

Demo

这个 Edge 的 BUG，会让 checkbox 美化的最佳实践受到影响

解决方案

修复起来也简单，除了用 :disabled 选择器外，再补一个 .disabled 的选择器进行兜底。

这年头各种状态驱动界面，class 用起来都不是个事。

测试版本号

• Microsoft Edge 42.17134.1.0