html - 自定义复选框在IE 7和IE 8中不起作用

我在HTML上创建了自定义复选框，在IE 9，IE 10和其他最新版本的浏览器上都可以正常工作。但是，当我尝试在IE 7和IE 8上运行它时，它无法正常工作。如图所示。我做的事？请帮我！



我的CSS和HTML代码如下

的CSS

    .ckbox
{
    width: 25px;
    height: 25px;
}
.custom-checkbox
{
    position: relative;
    display: inline-block;
}

.custom-checkbox > .box
{
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    background-color: #FFF;
    padding: 0px;
    margin: 0px;
}

.custom-checkbox > .box > .tick
{
    position: absolute;
    left: 4px;
    top: 7px;
    width: 14px;
    height: 6px;
    border-bottom: 4px solid #000;
    border-left: 4px solid #000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: none;
}

.custom-checkbox > input:checked + .box > .tick
{
    display: block;
}

.custom-checkbox > input
{
    position: absolute;
    outline: none;
    left: 0;
    top: 0;
    padding: 0;
    width: 25px;
    height: 25px;
    border: none;
    margin: 0;
    opacity: 0;
    z-index: 1;
}

的HTML

<table style="background-color: #E5E5E5;">
        <tr>
            <td>
                <span class="custom-checkbox">
                    <input id="fileItem" name="fileItem" type="checkbox" class="ckbox" value="1" checked="checked" />
                    <span class="box"><span class="tick"></span></span>
                </span>
                <input id="fileId" name="fileId" type="hidden" value="" />
            </td>
            <td>
                <label for="fileItem" title="">
                    Check</label>
            </td>
        </tr>
    </table>

最佳答案

正如Adrift和Matthew指出的那样，您包含的许多样式都不适用于ie7和8。在我看来，对于大多数应用程序来说，这很好，因为它们仍然可以工作，而且人们无论如何都不应该使用ie7和8。 。

但是，如果您需要它来工作，可以使用javascript方法：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/