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 では機能しません。私の意見では、ほとんどのアプリケーションでは問題ありません。 .

ただし、動作させる必要がある場合は、javascript アプローチを使用できます: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2013-04-10T16:25:45.100 に答える