2013-04-10 2 views
0

Я создал пользовательский флажок в HTML, который отлично работает в IE 9, IE 10 и других браузерах последней версии. Но когда я пытаюсь запустить его на IE 7 и IE 8, он не работает. см. на изображении. Что я делаю? Пожалуйста, помогите мне!Пользовательский флажок не работает в IE 7 и IE 8

enter image description here

Мой 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> 
+0

Существует [нет поддержки] (http://caniuse.com/transforms2d) для 'transform' собственности или псевдокласс класса ': checked' в IE 7/8 – Adrift

+0

В IE есть еще несколько вещей, которые не работают (например,' display: inline-block; 'для IE7). –

ответ

1

Как Adrift и Мэтью отметил, многие из стилей вы включили не будет работать для ie7 & 8. На мой взгляд ion, для большинства приложений это нормально, так как они все равно будут работать, и люди не должны использовать ie7 & 8 в любом случае.

Если вам это нужно, чтобы работать в то есть, хотя, вы можете использовать яваскрипт подход: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Смежные вопросы