Chrome忽略含::-ms-check的CSS复选框样式规则，求非拆分规则的解决办法

这个问题我之前也碰到过！Chrome会直接忽略包含它不认识的选择器的整个CSS规则块，而::-ms-check是IE专属的伪元素，所以当你把它和input[type="checkbox"]放在同一条规则里时，Chrome就直接跳过整个规则了。除了拆分两套独立规则，还有两个更优雅的解决办法：

方法1：使用原生CSS嵌套 #

现在主流浏览器（包括Chrome）都支持原生CSS嵌套了，你可以把IE专属的伪元素规则嵌套在主选择器内部。这样Chrome会正常解析外层的标准规则，同时自动忽略它不认识的嵌套伪元素规则；而IE会同时解析外层和嵌套的规则，完美兼顾两者：

input[type="checkbox"] {
  border: none;
  border-radius: 9px;

  /* 仅IE能识别这个伪元素选择器，其他浏览器会忽略该嵌套块 */
  &::-ms-check {
    border: none;
    border-radius: 9px;
  }
}

方法2：用IE专属媒体查询包裹伪元素规则 #

如果你不想用嵌套，也可以把IE的规则放到只有IE10+能识别的媒体查询里。Chrome会直接忽略整个媒体查询块，不会影响主规则的生效，同时IE会应用媒体查询内的规则：

input[type="checkbox"] {
  border: none;
  border-radius: 9px;
}

/* 仅IE10+会触发这个媒体查询 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  input[type="checkbox"]::-ms-check {
    border: none;
    border-radius: 9px;
  }
}

这两种方法都不用拆分出完全独立的两套规则，既保持了代码的整洁性，又解决了浏览器兼容性问题。

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