最近测试同学发现,用 Edge 浏览器,访问问卷的新版设置界面,部分联动锁总是显示异常,该锁的没锁,不该锁的又锁上了。
期初以为是 React 在 Edge 里面有什么 bug,一圈排查下来,发现状态、样式都是正确的,偏偏就是显示出来的很诡异,鼠标在上面晃动一下又正常了(浏览器绘制BUG,以前 IE7 也遇到过)。
这个 BUG 的特征,当使用 :disabled ~ label
这种伪类 + 相邻元素进行样式定义的时候,如果动态修改 input.disabled
的值,其对应的 label
的表现就不会更新。
这个 Edge 的 BUG,会让 checkbox 美化的最佳实践受到影响
修复起来也简单,除了用 :disabled
选择器外,再补一个 .disabled
的选择器进行兜底。
这年头各种状态驱动界面,class 用起来都不是个事。