IE11中:before/:after伪类不显示问题及修复方法咨询

我编写的以下CSS代码在Chrome与Firefox浏览器中运行正常，但在IE11中:before和:after伪类无法显示，导致无法插入所需图片。请问问题根源是什么？该如何修复？
代码如下：

.contact .contact-form form .wpcf7-list-item label { display: -webkit-box; display: -ms-flexbox; display: flex; color: #000; cursor: default; font-weight: normal; line-height: 30px; vertical-align: middle; } 
.contact .contact-form form .wpcf7-list-item label input[type=checkbox] { -moz-appearance:initial; width: auto !important; display: block; cursor: pointer; font-size: 13px; visibility: hidden; -webkit-transform: scale(1.5); transform: scale(1.5); } 
.contact .contact-form form .wpcf7-list-item label input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 13px; height: 13px; visibility: visible; border: 1px solid #FFF; padding: 0 6px 0 1px; margin: 2px 0; border: 1px solid #222222; } 
.contact .contact-form form .wpcf7-list-item label input[type=checkbox]:checked:after { content: url(../images/Group.svg); font-weight: bold; background: #9BAE88; border: none; color: black; } 
.contact .contact-form form .wpcf7-list-item label .wpcf7-list-item-label { padding-left: 22px; margin-top: -5px; } 
.contact .contact-form form .wpcf7-not-valid-tip { font-size: 13px; font-family: "JosefinSans",sans-serif; font-weight: lighter; } 
.contact .contact-form form .wpcf7-not-valid-tip:before { content: url(../images/Warning.svg); width: 100%; border-bottom: solid 1px #fff; margin-right: 10px; line-height: 35px; }

为啥IE11会搞事情？ #

IE11对CSS的支持真的有不少坑，你的问题主要出在这几点：

• input元素不认伪类：IE11觉得input这种“替换元素”（浏览器自带样式的控件）不能加:before或:after，所以你给checkbox加的:after在它眼里根本不存在，直接忽略。
• SVG引用有bug：IE11对content: url()里的相对路径SVG支持很差，要么加载不出来，要么显示畸形。
• Flex布局拖后腿：虽然你加了-ms-flexbox前缀，但IE11的flex布局bug一堆，比如垂直居中、margin的处理都有问题，间接导致伪元素的位置或显示出问题。

怎么修复？一步步来 #

1. 先改HTML结构（核心！） #

既然IE11不让给input加伪类，那我们给checkbox套个容器，比如<span class="checkbox-container">，把伪类加在容器上。修改后的结构大概是这样：

<span class="wpcf7-list-item">
  <label>
    <span class="checkbox-container">
      <input type="checkbox" name="your-checkbox" value="option">
    </span>
    <span class="wpcf7-list-item-label">你的选项文本</span>
  </label>
</span>

2. 重写CSS，适配容器伪类 #

把原来给input的样式全部转移到容器上，同时照顾IE11的脾气：

/* 先给容器做基础样式，替代原来的input外观 */
.contact .contact-form form .wpcf7-list-item label .checkbox-container {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 2px 0;
  border: 1px solid #222;
  background-color: #fff;
  cursor: pointer;
}

/* 把原生checkbox彻底藏起来，但保留点击功能 */
.contact .contact-form form .wpcf7-list-item label .checkbox-container input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* 选中状态的样式：用容器的内部元素显示对勾SVG */
.contact .contact-form form .wpcf7-list-item label .checkbox-container input[type=checkbox]:checked ~ .checkbox-indicator,
/* 兼容IE11的选中状态（保险起见可配合JS添加类） */
.contact .contact-form form .wpcf7-list-item label .checkbox-container.checked .checkbox-indicator {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #9BAE88 url(../images/Group.svg) center center no-repeat;
  background-size: contain;
  border: none;
}

/* 调整选项文本的位置，用flex居中更靠谱 */
.contact .contact-form form .wpcf7-list-item label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center; /* 垂直居中，替代原来的vertical-align和margin-top */
  color: #000;
  cursor: default;
  font-weight: normal;
  line-height: 30px;
}
.contact .contact-form form .wpcf7-list-item label .wpcf7-list-item-label {
  padding-left: 8px; /* 调整间距，比原来的22px更合理 */
}

/* 修复提示信息的:before伪类：不用content:url，改用background-image */
.contact .contact-form form .wpcf7-not-valid-tip:before {
  content: '';
  display: inline-block;
  width: 20px; /* 根据你的SVG大小调整 */
  height: 20px;
  margin-right: 10px;
  background: url(../images/Warning.svg) center center no-repeat;
  background-size: contain;
  vertical-align: middle;
}

3. 额外的兼容小技巧 #

• SVG转Base64：如果IE11还是加载不了SVG，把SVG转成Base64编码（网上有很多免费工具），直接写在background-image里，比如：background-image: url('data:image/svg+xml;base64,XXX');，这样就不会有路径问题了。
• 配合JS补全IE11选中状态：如果IE11对:checked选择器支持不稳定，可以用JS监听checkbox的点击事件，给容器添加/移除.checked类来控制样式。

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