html - CSS :after image not showing up - IE8

Question

编辑:真不敢相信我忘了具体说明，这个问题出现在 IE8 中

我有一个带有一堆复选框的表单，设置如下:

HTML:

<input type="checkbox" class="checkbox" name="fields" id="Anesthesiology" /><label for="Anesthesiology">Anesthesiology</label>

CSS:

.checkbox {
  display: none;
}
.checkbox + label {
  position: relative;
  display: block;
  padding-left: 25px;
  margin: 16px 0 0;
  font: 13px/16px 'Trebuchet MS', Arial, sans-serif;
  color: #656565;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.checkbox + label:before {
  content:" ";
  display: block;
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #d1d1d1;
}

.checkbox.checked + label:after {
  content:" ";
  display: block;
  width: 16px;
  height: 17px;
  background-image: url(../images/checkmark.png);
  position: absolute;
  top: -3px;
  left: 2px;
}

这样做是隐藏默认复选框并创建一个新的复选框作为 :before 标签(显示在 ie8 中)。当标签被点击时，一类 .checked 被附加到复选框输入标签，然后应该使 :after 复选标记背景图像出现。我也尝试过在标签内使用跨度来达到同样的效果，但似乎没有任何效果。类被正确附加，但 :after 复选标记从未出现。

有什么想法吗？

Answer 1

我有a 另一个工作示例 here 。
(已在 Google Chrome、Mozilla Firefox、Safari、IE10 和 IE8 中测试工作)


HTML:

<input type="checkbox" name="Anesthesiology_1" value="true" class="AnesthesiologyCheckbox" id="Anesthesiology_1">
<label for="Anesthesiology_1" class="AnesthesiologyLabel">Anesthesiology</label>

CSS:

.AnesthesiologyCheckbox {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 0px;
    width: 0px;
    font-size: 1px;
    line-height: 0px;

    -moz-appearance: none;
    position:relative;
    left:-100%;
}