CSS：图像未显示后 - IE8答案

【问题标题】：CSS :after image not showing up - IE8CSS：图像未显示后 - IE8
【发布时间】：2013-09-26 00:59:48
【问题描述】：

编辑：不敢相信我忘了指定，这个问题在 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 复选标记背景图像出现。我也尝试过在标签内使用 span 以获得相同的效果，但似乎没有任何效果。类已正确附加，但 :after 复选标记从未出现。

有什么想法吗？

【问题讨论】：

检查你对 :after 的理解在这里的链接coding.smashingmagazine.com/2011/07/13/…
是的，我知道如何使用它们，:before 和 :after 出现在计算样式中，但是当 .checked 发挥作用时，它们无处可寻。如果我将 :after 添加到未选中的输入中，它也会显示出来，所以我知道它不是定位的东西。
我创建了一个 jsfiddle，这似乎工作正常 jsfiddle.net/pWb3x 你的代码有什么不同？
是的，不敢相信我忘了说这个问题是在 ie8 中
msdn.microsoft.com/en-us/library/ie/cc304076(v=vs.85).aspx 尝试使用 ::after。在黑暗中拍摄，但它可能会起作用......即以奇怪的方式起作用

标签： html css checkbox internet-explorer-8 pseudo-element

【解决方案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%;
}

【讨论】：

是的，不敢相信我忘了说这个问题是在 ie8 中
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@Athari 是的，但它在 IE8 中仍然无法工作，所以我想在更新我的帖子之前先弄清楚
@EvanWard 我已经更新了帖子，它现在在 IE8 中对你有用吗？

【解决方案2】：

类被追加或替换？如果你改变了会发生什么

.checkbox.checked + label:after {

到

.checked + label:after {

【讨论】：

我已经尝试过了，甚至在上面使用了一个 !important 标签。不幸的是，没有改变任何东西。
我的下一步可能是在 Chrome 中对其进行测试，并使用 F12 来准确查看该元素上当前处于活动状态的样式属性。我发现这是非常宝贵的。