0

我在 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>
4

1 回答 1

1

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

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

于 2013-04-10T16:25:45.100 回答