Come posso impedire al filtro gradiente di proprietà di Internet Explorer di tagliare il contenuto che dovrebbe traboccare?

Question

Sto usando il filtro gradiente di Internet Explorer nel mio CSS.

Stava andando tutto bene fino a quando ho notato che le immagini che dovrebbero estendersi oltre i loro contenitori overflow:visible; sono sempre ritagliati come se il contenitore è stato impostato su overflow:hidden;

Non ho idea del perché questo sarebbe accaduto, o come aggiustalo. Qualcuno può aiutare?

sto guardando in IE8 e IE7

Questo è il css la causa del problema, quando io commento fuori, non più bug:

.box{ 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */ 
} 

Answer 1

Questo funziona, sebbene sia un markup extra.

<div id="box_that_wants_a_gradient"> 
    <div class="gradient_background_1"></div> 
    <div class="gradient_background_2"></div> 

My content 

</div> 

C'è un bonus a questa tattica, come è possibile aggiungere più caselle di gradiente e impostare le loro altezze/larghezze in% del genitore, emulando così il comportamento di "interruzione di colore" ha permesso in Safari/Moz.

Ad esempio:

<style> 

#box_that_wants_a_gradient { 
    position:relative; 
    display:block; 
    height:100px; 
    width:100px} 

.gradient_background_1 { 
    position:absolute; 
    height:20%; 
    *cbf writing out microsoft filter code*; 
    top:0; 
    width:100%; 
    left:0px} 

.gradient_background_2 { 
    position:absolute; 
    height:80%; 
    *still cbf writing out microsoft filter code*; 
    top:20%; 
    width:100%; 
    left:0px} 

</style> 

Answer 2

So che questo non risponde la tua domanda in particolare, ma considera il tuo pubblico. Sono tutti solo utenti di Internet Explorer o rappresentano le proporzioni naturali degli utenti di Internet? Se non sono tutti solo utenti di IE (magari in una rete aziendale/scolastica), allora considera di utilizzare solo i metodi conformi agli standard e di consentire all'applicazione/sito di degradarsi con garbo a un browser che non lo supporta, come IE.

Ora, per la tua domanda. Il motivo per cui non funziona come previsto è che la casella non si estende fino alla fine del contenuto, anche quando è visibile l'overflow. Il contenuto semplicemente 'cammina' fuori dagli schemi, ma questo non rende la scatola più grande. Non è possibile estendere la scatola per adattarla al contenuto, ad eccezione di senza impostare le proprietà width e/o height fisse. In effetti, IE aveva un bug in cui invece di traboccare, la scatola si estendeva (era un bug).

Posso consigliare un suggerimento però; utilizzare min- <larghezza/altezza> e massimizzando <larghezza/altezza> anziché larghezza e/o altezza. Ti permettono un dimensionamento flessibile della scatola, con limiti guidati.

Answer 3

Questo può aiutare coloro che stanno scegliendo di abbandonare il supporto per IE7.

IE7 avrà sempre un problema se l'elemento è posizionato (relativo/assoluto/fisso). In IE8 + il problema scompare se z-index è impostato su auto.

Se è necessario supportare IE7 o se è necessario impilare elementi utilizzando z-index, è necessario accontentarsi di un secondo DIV di avvolgimento.

<div class="position_me_and_stack_me_with_z-index"> 
    <div class="give_me_a_filter"> 
    Content goes here 
    <div> 
</div> 

Modifica 2012-05-29: Ho creato un esempio per mostrare come risolvere questo problema. Ho creato l'esempio per risolvere un problema di impilamento dello z-index ... e mi è capitato di risolvere anche questo problema (http://jsfiddle.net/ryanwheale/gz8v3/).

Answer 4

ho impostato la posizione di div genitore relativa e ha funzionato :) (o assoluto, funziona bene anche)