html - 复选框自定义样式在 Internet Explorer 11 中无法正确显示

Question

我正在研究自定义复选框。它在 Chrome、Mozilla 和 Safari 中运行良好，但在 IE 11 中无法正常显示。

我在 Stack Overflow 中尝试了最多的方法来寻找与此问题相关的答案，但我找不到答案，所以我在这里提问。请参阅此代码示例:

https://jsfiddle.net/spvkomd1/

.chk_bx label {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.custom_chk_bx {
  padding-top: 15px;
}

.chk_bx {
  padding-right: 20px;
}


/* Base for label styling */

.custom_chk_bx [type="checkbox"]:not(:checked),
.custom_chk_bx [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

.custom_chk_bx [type="checkbox"]:not(:checked)+label,
.custom_chk_bx [type="checkbox"]:checked+label {
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  margin-bottom: 0;
}


/* checkbox aspect */

.custom_chk_bx [type="checkbox"]:not(:checked)+label:before,
.custom_chk_bx [type="checkbox"]:checked+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb( 192, 209, 218);
  border-radius: 4px;
  box-shadow: none;
}


/* checked mark aspect */

.custom_chk_bx [type="checkbox"]:not(:checked)+label::after,
.custom_chk_bx [type="checkbox"]:checked+label::after {
  color: #0b8fcf;
  content: "✔";
  font-size: 16px;
  left: 5px;
  line-height: 100%;
  position: absolute;
  top: 5px;
  transition: all 0.2s ease 0s;
}


/* checked mark aspect changes */

.custom_chk_bx [type="checkbox"]:not(:checked)+label:after {
  opacity: 0;
  transform: scale(0);
}

.custom_chk_bx [type="checkbox"]:checked+label:after {
  opacity: 1;
  transform: scale(1);
}

<div class="dtl_row">
  <div class="custom_chk_bx inpt_blk">
    <span class="chk_bx">
       <input type="checkbox" id="test1" name="" value="">
       <label for="test1">Compliant With PF(India)</label>
    </span>
    <span class="chk_bx">
       <input type="checkbox" id="test2" name="" value="" checked="checked">
       <label for="test2"> With ESIC(India)</label>
    </span>
  </div>
</div>

Answer 1

添加行高这个类

.custom_chk_bx [type="checkbox"]:not(:checked) + label::after, .custom_chk_bx [type="checkbox"]:checked + label::after {
    color: #0b8fcf;
    content: "✔";
    font-size: 16px;
    left: 5px;
    line-height: 16px; /*Add This */
    position: absolute;
    top: 5px;
    transition: all 0.2s ease 0s;
}