Question

我的CSS3复选框有以下CSS。它适用于所有现代浏览器，但不能在IE8上工作，因此我想禁用这些特殊复选框，只保留默认复选框。有可能吗？

   input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
    }

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:17px;
    height:15px; 
    display:inline-block;
    line-height:15px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:15px;
    vertical-align:middle;
    cursor:pointer;
    }

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
        }
label.css-label {
    background-image:url('../gfx/checkbox.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    }

一些HTML5代码：

 <input type="text" size="50" name="dni" value="%dni" class="forminput" style="width: 40px">
<div style="padding-top:10px">Usuwaj tylko zdjęcia pozostawiając artykuły i komentarze&nbsp; 
<input name="czy_tylko_zdjecia" type="checkbox" value="1" %czy_tylko_zdjecia id="checkbox_settings" class="css-checkbox">
<label for="checkbox_settings" class="css-label"></label>

Answer 1

在IE8中不值得，因为CSS3 :checked pseudo class不是supported。

您可以定位IE8并使用条件覆盖您的值：

<!--[if IE 8]>
<style>
    input[type=checkbox].css-checkbox {
        position: static;
        z-index: auto;
        left: auto;
        overflow: visible;
        clip: auto;
        height: auto;
        width: auto;
        margin: 0;
    }
</style>
<![endif]-->

您还可以使用\9 hack定位IE8及以下版本：

input[type=checkbox].css-checkbox {
    position: static\9;
    z-index: auto\9;
    left: auto\9;
    overflow: visible\9;
    clip: auto\9;
    height: auto\9;
    width: auto\9;
    margin: 0\9;
}

禁用IE8上的CSS3复选框

1 个答案: