避免CSS破解IE8的複選框

我使用CSS3的樣式像一個複選框這個site（張玻片）避免CSS破解IE8的複選框

HTML：

<div class="slideThree"> 
     <input type="checkbox" id="slideThree" name="check" /> 
     <label for="slideThree"></label> 
</div>

CSS：

input[type=checkbox] { 
    visibility: hidden; 
} 

/* SLIDE THREE */ 
.slideThree { 
    width: 91px; 
    height: 26px; 
    background: #2B3D61; 
    margin: 5px; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    position: relative; 

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
} 

.slideThree:after { 
    content: 'OFF'; 
    font: 14px/26px Arial, sans-serif; 
    color: #FFF; 
    position: absolute; 
    right: 10px; 
    z-index: 0; 
    font-weight: bold; 
    text-shadow: 1px 1px 0px rgba(255,255,255,.15); 
} 

.slideThree:before { 
    content: 'ON'; 
    font: 14px/26px Arial, sans-serif; 
    color: #FFF; 
    position: absolute; 
    left: 10px; 
    z-index: 0; 
    font-weight: bold; 
} 

.slideThree label { 
    display: block; 
    width: 45px; 
    height: 24px; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 

    -webkit-transition: all .4s ease; 
    -moz-transition: all .4s ease; 
    -o-transition: all .4s ease; 
    -ms-transition: all .4s ease; 
    transition: all .4s ease; 
    cursor: pointer; 
    position: absolute; 
    top: 1px; 
    left: 3px; 
    z-index: 1; 

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
    background: #fcfff4; 

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0); 
} 

.slideThree input[type=checkbox]:checked + label { 
    left: 44px; 
}

IE8在這裏不支持某些東西。編輯我已經有一個DOCTYPE和我已經刪除z-index但什麼也沒有改變。複選框仍然不起作用。有沒有辦法解決這個問題，或者我需要在我的HTML中使用條件CSS？如果它降級到只是一個簡單的複選框，IE8會很好。

來源

2013-05-08 Tom

：前和：後IE8的支持 - http://msdn.microsoft.com/en-us/library/ie/cc304078(v=vs.85).aspx – lifetimes 2013-05-08 17:34:53

@天頂是正確的，ie8支持：之前和之後：。 - > 8：部分支持：z-index的不尊重，必須使用DOCTYPE，必須聲明：如果您使用懸停狀態：懸停：後/：懸停：以前 – 2013-05-08 17:41:34

其他@MilchePatern什麼？我刪除了'z-index'並且'doctype'存在，並且我不使用'：hover'。仍然沒有變化。 – Tom 2013-05-08 18:15:13

我同去骯髒（我的意思是拉斯維加斯骯髒）的IE有條件覆蓋的CSS讓它回到只是一個複選框。

又名

<!--[if lt IE 9]> <link rel="stylesheet" href="default-ie.css" type="text/css" /> <![endif]-->

來源

2013-05-08 20:53:45 Tom

解決此問題的方法是爲:after和:before聲明創建額外的類名，並使用JavaScript根據事件添加/刪除這些類。

來源

2013-05-08 17:33:50

標籤前添加一個跨度和標籤後：

<label for="slideThree"></label><span class="on">On</span><span class="off">Off</span>

CSS的。對：

font: 14px/26px Arial, sans-serif; 
color: #FFF; 
position: absolute; 
left: 10px; 
z-index: 0; 
font-weight: bold;

CSS爲.off：

font: 14px/26px Arial, sans-serif; 
color: #FFF; 
position: absolute; 
right: 10px; 
z-index: 0; 
font-weight: bold; 
text-shadow: 1px 1px 0px rgba(255,255,255,.15);

來源

2013-05-08 17:36:15

不幸的是沒有改變。 – Tom 2013-05-08 18:16:23

適用於我：http://cssdeck.com/labs/alk8bfqu雖然將範圍移到了最後。 – 2013-05-08 21:05:03

避免CSS破解IE8的複選框

回答

相關問題