2015-02-10 44 views
1

我對CSS3複選框有以下CSS。它適用於所有現代瀏覽器,但不適用於IE8,所以我想禁用這些特殊的複選框,並保留默認設置。可能嗎 ?禁用IE8上的CSS3複選框

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> 

回答

0

它不值得IE8因爲CSS3 :checked pseudo classsupported

,您可以定位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; 
} 
+0

謝謝!有效 ;) – 2015-02-10 20:32:02