Nieprzezroczystość css powodująca problemy z układem w IE9

Natknąłem się na bardzo interesujący problem w IE9. Podczas korzystania z filtru: alfa (opacity =) lub -ms-filter właściwość css na opakowaniu div powoduje, że model pudełkowy wewnętrznych elementów bloku zostaje uszkodzony. Innymi słowy, zwijanie pionowego marginesu zostanie wyłączone, a zamiast niego zostanie dodany pionowy margines. Mam do czynienia z tym problemem tylko w IE9. IE7/8 nie ma wpływu.Nieprzezroczystość css powodująca problemy z układem w IE9

Oto jsFiddle z wyizolowanym problemem. Użyj zakotwiczenia wyzwalacza, aby aktywować klasę zawierającą filtr: alfa w opakowaniu div. (Tylko IE9)

Jakieś pomysły, dlaczego tak się dzieje?

góry dzięki

Źródło

2012-09-17 travisbotello

Dowolny filtr wydaje się to robić (http://jsfiddle.net/7BFd7/). Ale własność CSS 'opacity' działa w IE9 i nie powoduje usterki. Tak więc używanie filtru tylko w stylu "[if IE 9]" może być pracą dookoła. – Roman

Dzięki za szybką odpowiedź. Już o tym myślałem, ponieważ używam zestawu znaków we wszystkich moich projektach. Jednak takie zachowanie jest naprawdę bardzo dziwne ... – travisbotello

@Roman Prawdopodobnie dobrze byłoby opublikować to jako odpowiedź, aby można było zaakceptować. – Shauna

Każdy filtr wydaje się to zrobić (jsfiddle.net/7BFd7).

Mogłem tylko postawić hipotezę, dlaczego tak się dzieje. Wygląda na to, że użycie filtra powoduje, że element używa jakiegoś nieznanego trybu wyświetlania lub położenia, który nie powoduje zapadania się marginesów (jak bezwzględne położenie, bloki wbudowane i elementy pływające lub wyczyszczone).

mimo to .. Jeśli chcesz tylko ukryć ten element, możesz użyć visibility: hidden, który ma taki sam efekt jak opacity: 0 i jest obsługiwany wszędzie.

Jeśli chcesz animować krycie, musisz wykonać przeglądarkę węsząc przez komentarze warunkowe lub Normalizr i animować opacity w IE9 i zastosować filtr w starszych wersjach IE.

Źródło

2012-09-18 08:27:57 Roman

Jednym ze sposobów na „wyłączony” filer w IE9 tylko z CSS, jednocześnie umożliwiając jej zastosowanie w IE8 i niższy jest następujący kod, który będzie kierować tylko IE9:

.css-selector { 
    filter:value; 
    opacity:value; 
} 
@media all and (min-width:0) { /* the min-width query hides below IE9 */ 
    .css-selector { 
     filter:none; 
    } 
}

W ten sposób, będziesz używaj tylko krycie: wartość, a nie filtrowanie tego elementu w IE9.

Źródło

2014-04-01 23:14:40 squareman

Nieprzezroczystość css powodująca problemy z układem w IE9

Odpowiedz

Powiązane problemy