opacità css che causa problemi di layout in IE9

Ho trovato un problema molto interessante in IE9. Quando si utilizza il filtro: alpha (opacity =) o -ms-filter css property su un wrapping div il modello di box degli elementi del blocco interno viene danneggiato. In altre parole, il collasso del margine verticale viene disabilitato e al suo posto viene aggiunto il margine verticale. Sto affrontando questo problema solo in IE9. IE7/8 non è interessato.opacità css che causa problemi di layout in IE9

Ecco uno jsFiddle con il problema isolato. Usa l'ancora del grilletto per attivare la classe che include il filtro: alpha sul div wrapping. (Solo IE9)

Qualche idea del perché questo sta accadendo?

Grazie in anticipo

fonte

2012-09-17 travisbotello

Qualsiasi filtro sembra farlo (http://jsfiddle.net/7BFd7/). Ma la proprietà CSS 'opacity' funziona in IE9 e non causa il glitch. Quindi, usare il filtro solo in uno stile commentato '[if lt IE 9] potrebbe essere un problema. – Roman

Grazie per la rapida risposta. Ho già pensato a questo dato che sto usando lo standard di caldaia in tutti i miei progetti. Tuttavia questo comportamento è davvero molto strano ... – travisbotello

@Roman Probabilmente sarebbe bello postarlo come risposta in modo che possa essere accettato. – Shauna

Qualsiasi filtro sembra fare questo (jsfiddle.net/7BFd7).

Potrei solo ipotizzare sul perché lo faccia. Sembra che l'utilizzo di un filtro imposta l'elemento in modo che utilizzi una modalità di visualizzazione o posizione sconosciuta che non faccia collassare i margini (come la posizione assoluta, i blocchi in linea e gli elementi flottati o deselezionati).

comunque .. Se si desidera nascondere solo quell'elemento, è possibile utilizzare visibility: hidden, che ha lo stesso effetto di opacity: 0 ed è supportato ovunque.

Se si desidera animare l'opacità, è necessario fare lo sniffing del browser tramite i commenti condizionali o Normalizr e animare opacity in IE9 e applicare il filtro nelle versioni di IE precedenti.

fonte

2012-09-18 08:27:57 Roman

Un modo per "unset" il filer in IE9 con solo i CSS, consentendo di applicare in IE8 e più basso è il seguente codice che solo obiettivo IE9:

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

In questo modo, avrete quindi utilizza solo opacity: value e non filtra su quell'elemento in IE9.

fonte

2014-04-01 23:14:40 squareman

opacità css che causa problemi di layout in IE9

risposta

Problemi correlati