CSS：在IE11中无法使用之前

Question

我用FontAwesome中的图标替换了传统的单选按钮。一切在Chrome和Firefox上都能正常运行，但是IE11出现了问题-我要替换为单选按钮的图标根本没有显示。

使用有效的Fiddle进行编辑： https ：//jsfiddle.net/sow1a04m/

Chrome中的示例：

IE11中的示例：

这是我的HTML：

<tr>
    <td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
        </label>
    </td>
</tr>

这是我的CSS：

#dlg-audit-intake-compliance-checklist input[type=radio] {
    visibility: hidden;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
    cursor: pointer;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:before {
    visibility: visible;
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
    color: #009C15;
    content: "\f00c";
}

#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
    color: #AD0000;
    content: "\f00d";
}

#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
    color: #F7D200;
    content: "\f05e";
}

我认为这可能与visibility我应用的设置有关，但我自己还无法弄清楚。

Answer 1

问题是在输入元素上使用伪元素，它在IE中不起作用，而是使用标签作为目标...实际上，它在Chrome中也不应该工作，因为伪元素被认为不适用于单个标签元素。

我更改了此规则以显示如何操作，因此您现在将看到它适用于FontAwesome

#dlg-audit-intake-compliance-checklist label:before {
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

更新的小提琴