CSS transizione non funziona in IE

Non posso ottenere questa transizione di lavoro in IE o Firefox, Si guarda bene in Safari e Chrome.
L’opacità mostra ma è istantaneo.

Per me il seguente CSS guarda a destra e non riesco a vedere alcun motivo che potesse funzionare anche in IE o firefox.

Ho provato questo utilizzando ms-transizione e produce gli stessi risultati, ma il sito utilizza CSS3 comunque, quindi non è necessario che l’-ms – comunque da quello che ho letto.


Ogni luce che può essere versato sarebbe molto apprezzato!

Ben

CSS:

.XMABAN {   
    height: 153px;  
    width: 230px;  
    background-color:rgb(127,0,25);  
    padding: 0;  
    vertical-align: top;  
}

.XMABAN a {  
    height: 153px;  
    width: 230px;  
    text-decoration:none;  
}

.XMABAN a:hover         {   
    text-decoration:none;   
}

.XMABAN img             {   
    opacity: 1;  
    transition: opacity 0.70s ease-in-out;   
    -moz-transition: opacity 0.70s ease-in-out;  
    -webkit-transition: opacity 0.70s ease-in-out; 
    -o-transition: opacity 0.70s ease-in-out; 
}

.XMABAN a:hover img     {   
    opacity: 0.30;  
    transition: opacity 0.25s ease-in-out;  
    -moz-transition: opacity 0.25s ease-in-out;  
    -webkit-transition: opacity 0.25s ease-in-out;  
    -o-transition: opacity 0.25s ease-in-out;  
}

.XMABAN span            {   
    position: relative;  
    left: 0%;  
    top: -62%;  
    font-weight:bold;  
    font-size:20pt;  
    color:#404040;  
    transition: color 0.70s ease-in-out;  
    -moz-transition: color 0.70s ease-in-out;  
    -webkit-transition: color 0.70s ease-in-out;  
    -o-transition: color 0.70s ease-in-out;  
}

.XMABAN a:hover span    {   
    color:#FFF0F5;  
    transition: color 0.25s ease-in-out;  
    -moz-transition: color 0.25s ease-in-out;  
    -webkit-transition: color 0.25s ease-in-out;  
    -o-transition: color 0.25s ease-in-out;  
}

HTML:

<tr>
    <td style="width: 33%;">
        <div class="XMABAN" style="margin: 10px 0px 5px 0px;">
            <a class="DSPI" href="online.asp">
                <img src="../images/PRM_220.jpg">
                <span>TEXT</span>
            </a>
        </div>
    </td>
</tr>
  • Che versione di IE, su un lato nota dai un’occhiata a prefixfree per evitare di dover aggiungere i prefissi fornitore.
  • Scusate, probabilmente aiuta!! Ho controllato in IE10 e IE9 con lo stesso risultato, in ogni.
  • Hmm potrebbe ricreare un violino ?
  • Le Transizioni CSS non supportato in IE9, così non funzionerà mai in IE9. Che di supportato in IE10 (senza bisogno di un prefisso), così sì che dovrebbe funzionare, ma si dovrebbe controllare il vostro browser in modo, che se è in modalità di compatibilità o modalità, la funzione verrà disattivata.
  • jsfiddle.net/2fLTU questo funziona bene in ie 10 hanno un look
  • Sembra che c’è qualcosa nella pagina inclusa a sovrascrivere il CSS. Ho avuto funzionante in tutti i browser per circa 5 minuti, ma un aggiornamento e non funziona in IE10 di nuovo! Firefox ora è ok anche se dopo aver modificato la posizione di webkit. Grazie James! modalità browser è sicuramente IE10 e, pertanto, deve essere qualcosa di non prima. Continuerà a caccia!

InformationsquelleAutor b_en | 2013-11-07



One Reply
  1. 4

    Transizioni CSS sono non supportato in IE9 o inferiore. Sono supportati in IE10, tuttavia, e il CSS che hai inserito non funziona correttamente in IE10.

    Posso solo supporre che si sta utilizzando con IE10 IE9 standard per eseguire questo test, che è il motivo per cui la transizione non funziona. Per modificare questa impostazione, è sufficiente impostare IE Modalità Documento agli Standard:

    CSS transizione non funziona in IE

    Vale anche la pena notare che si dovrebbe sempre includere fornitore prefisso prima prevista proprietà CSS. Specificando transition prima -webkit-transition, per esempio, dirà browser basati su WebKit, per utilizzare il prefisso versione al posto dell’attuale versione, e ci possono essere differenze nel modo in cui ognuno gestito. Modificare il CSS per:

    -moz-transition: ...;
    -webkit-transition: ...;
    -o-transition: ...;
    transition: ...;

Lascia un commento