css - ボタンがホバーし、チェックされた状態の CSS のようなスタイルのチェックボックスが Internet Explorer で機能しない

Question

ここでボタンとしてスタイル設定されたチェックボックスは、Internet Explorer 8 では、ホバー状態の青色または薄い青色のクリック状態を示しません。IE9 ではホバーを示しません。これを修正するために私ができることがわかりますか?

私は実際にここからCSSをほとんどコピーしました。

ここで取り組んでいるボタン (チェックボックス) とページ: http://kodiakgroup.com/clients.php

ボタン（チェックボックス）の私のCSS：

#ck-button {
    margin:4px;
    background-color:#dff0ff;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:12em;

}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    border-radius:4px;

}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:hover + span {
    background-color:#2f7fc7;
    color:#fff;
}

#ck-button input:checked + span {
    background-color:#97ceff;
    color:black;
}

#ck-button input:checked:hover + span {
    background-color:#2f7fc7;
    color:#fff;
}

body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }