Фильтр непрозрачности не работает для флажка (IE8)

Question

Я сделал некоторые настройки на checkbox и попытался сделать непрозрачность работать в IE8. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; работает над div, но когда я использую флажок, он не работает. В chrome и firefox непрозрачность работает правильно. Непрозрачность работает для элементов ввода/метки?

HTML:

<div class="col-xs-4 col-sm-4 col-md-4 data-stats"> 
     <div class="check-user-data"> 
      <input type="checkbox" value="checked" id="review-username" name="check"/> 
      <label for="review-username"></label> 
     </div> 
    </div> 

CSS:

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

    .check-user-data { 
     height: 50px; 
     text-align: center; 
    } 

    .check-user-data label { 
     cursor: pointer; 
     position: absolute; 
    } 

    .check-user-data label:after { 
     font-family: 'Glyphicons Halflings'; 
     content: "\e013"; 
     position: absolute; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 

     opacity: 0.2; 
    } 

    .check-user-data label:hover::after { 
     color: #49FF90; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

     opacity: 0.5; 
    } 

    .check-user-data input[type=checkbox]:checked + label:after { 
     color: #3BCC73; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

     opacity: 1; 
    } 

Answer 1

Убедитесь, что вы включили все соответствующие непрозрачности свойства:

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 

/* IE 5-7 */ 
filter: alpha(opacity=20); 

/* Netscape Based Browsers (Mozilla */ 
-moz-opacity: 0.2; 

/* For early Safari's (1.x) */ 
-khtml-opacity: 0.2; 

/* Official CSS property */ 
opacity: 0.2; 

Я не знаю, какой браузер вы поддерживаете, но t должна обеспечить поддержку большинства версий браузеров, используемых в настоящее время.

Кроме того, я сам столкнулся с этой проблемой в некотором коде. Убедитесь, что установленный флажок не содержит z-index над родительским элементом, у которого есть непрозрачность. Я обнаружил, что, вопреки официальной спецификации, Chrome и Firefox сделают все элементы внутри родительского непрозрачными, если родительский объект непрозрачен. IE действительно реализует его правильно, где он не только учитывает родителя, в котором находится элемент, но и z-индекс элемента при выпуске родительского элемента.

Пример 1:

<!-- Markup --> 
<div id="parent" class="transparent"> 
    <div id="child"></div> 
</div> 

/* CSS */ 
.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    -moz-opacity: 0.2; 
    -khtml-opacity: 0.2; 
    opacity: 0.2; 
} 

В этом случае оба родительские и дочерние элементы будут иметь свойство непрозрачности, применяемое к ним.

Пример 2:

<!-- Markup --> 
<div id="parent" class="transparent"> 
    <div id="child"></div> 
</div> 

/* CSS */ 
#parent { 
    position: relative; 
    z-index: 0; 
} 

#child { 
    position: relative; 
    z-index: 1; 
} 

.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    -moz-opacity: 0.2; 
    -khtml-opacity: 0.2; 
    opacity: 0.2; 
} 

В этом примере дочерний элемент имеет Z-индекс больше, чем родителя. В сущности, если бы вы смогли повернуть разметку на 90 градусов вокруг оси x, вы увидите два отдельных слоя на оси z. В приведенном выше примере я обнаружил, что Chrome и Firefox делают оба элемента непрозрачными, хотя элементы находятся на двух разных уровнях. В IE они не соответствуют (по официальной спецификации). Here - официальная спецификация свойства непрозрачности. Ниже приводится соответствующий фрагмент:

Так как элемент с непрозрачностью менее 1, скомпонован из одного внеэкранных изображений, содержание вне его не может быть слоистыми в г-го порядка между частями содержания внутри него. По той же причине реализации должны создать новый контекст стекирования для любого элемента с непрозрачностью менее 1. Если элемент с непрозрачностью меньше 1 не помещается, реализации должны рисовать создаваемый им слой в контексте родительского стека в одном и том же который будет использоваться, если бы он был позиционированным элементом с «z-index: 0» и «opacity: 1». Если элемент с непрозрачностью меньше 1, свойство «z-index» применяется, как описано в [CSS21], за исключением того, что «auto» рассматривается как «0», так как всегда создается новый контекст стекирования. См. Раздел 9.9 и Приложение E [CSS21] для получения дополнительной информации о контекстах стекирования. Правила в этом параграфе не применяются к элементам SVG, поскольку SVG имеет свою собственную модель рендеринга ([SVG11], глава 3).

Я знаю, что это может быть немного больше, чем вы искали, но я видел, что у вас есть позиционирование внутри вашего CSS, и я был укушен этой проблемой раньше, поэтому я решил поделиться ею.

Удачи и счастливого кодирования!