CSS Box-Shadow non funziona in IE

Come faccio a far funzionare tutto in IE?CSS Box-Shadow non funziona in IE

.fancy { 
    border: 1px solid black; 
    margin: 10px; 
    box-shadow: 5px 5px 5px #cccccc; 
    -webkit-box-shadow: 5px 5px 5px #cccccc; 
    -moz-box-shadow: 5px 5px 5px #cccccc; 
}

Grazie

fonte

2012-03-30 Daniel Harris

Quale versione di IE? –

Qualsiasi versione. Principalmente 7,8, o 9. –

IE cosa? 9 è abbastanza diverso da quello di 6. – iambriansreed

da Google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Probabilmente non è esattamente come si desidera, ma giocherellare con esso o guardare in DXImageTransform ancora un po '.

fonte

2012-03-30 19:39:12 Matthew

box-shadow è supportato da IE9 in poi.

Ci sono molti siti là fuori che descrivono come fare questo per gli IE più vecchi. Uno di loro è: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Verificate anche: http://www.css3.info/preview/box-shadow/

mio personali parere, in generale, a fare i vecchi browser fare cose che in realtà non può è questo: evitarlo. Applicare invece i principi di progressive enhancement. Spiega anche al tuo cliente che risolvere i problemi di obsoleti, i browser non standard con una soluzione non standard, richiede molto tempo e probabilmente non vale la pena.

fonte

2012-03-30 19:39:40

Da qui ho ricevuto il codice. Ho visto che aggiungere il metodo che ha usato non può essere applicato a una singola classe. –

Non sono abbastanza sicuro di cosa intendi con la singola classe? –

IE 8 è davvero un browser "non standard", ma non è particolarmente "obsoleto" e, soprattutto, non in un modo che la maggior parte dei clienti accetterà. Hai davvero bisogno di supportare la versione corrente (* n *) e la versione * n-1 *. –

Funziona bene in IE 9.

Le versioni precedenti non supporta box-shadow, ma è possibile utilizzare un filtro:

zoom: 1; 
filter: 
    progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);

Leggi: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

fonte

2012-03-30 19:40:16 Guffa

Non funziona affatto in IE 9. –

Quindi stai facendo qualcosa di sbagliato. Hai forse attivato la modalità di compatibilità? –

Non funziona nemmeno per me, in IE11. –

su IE è necessario utilizzare filtro per quell'effetto.

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); 
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; 
zoom: 1;

fonte

2012-03-30 19:42:37

Per me (IE11), questo rende l'intera immagine un'ombra gigante. –

Credo che questo problema è specifico per il browser, perché funziona per me in questo jsFiddle sia su IE9 & Chrome. Il link che hai fornito funziona in Chrome, ma non in IE9. Ciò indicherebbe che il problema è specifico della tua implementazione.

Vorrei verificare che la modalità di compatibilità fosse disabilitata, e assicurarmi inoltre che non siano attivate impostazioni che interferirebbero con i CSS. Vorrei anche suggerire di provare questo in più browser e utilizzando il processo di eliminazione per determinare il motivo per cui non funziona.

EDIT

Stavo guardando il tuo markup. Provare a rimuovere questa linea e vedere se fa la differenza:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

fonte

2012-03-30 19:50:12

Ho provato che, non funziona. –

Mi piacerebbe provarlo; Vedo quella riga nel mio "View Source" ma non so come ci arrivi. Non lo sto esplicitamente aggiungendo, questo è sicuro. Forse è su una delle pagine principali che questa pagina deriva da/usi. –

Si potrebbe anche usare http://css3pie.com/

PIE rende Internet Explorer 6-9 in grado di rendere alcune delle caratteristiche più utili decorazione CSS3.

fonte

2012-03-30 19:59:42 stewe

sul tuo sito, questa regola CSS impedisce box-shadow di lavorare in IE9:

table, table td { 
    border-collapse: collapse; 
}

See:box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

è necessario aggiungere border-collapse: separate; all'elemento che box-shadow è non funziona.

Quindi, questo dovrebbe risolvere il problema per voi:

.fancy { 
    border-collapse: separate; 
}

fonte

2012-03-30 22:48:07 thirtydot

E ora anche IE10 ne soffre. Peccato che Microsoft abbia rimosso i commenti condizionali. – GlennG

Questo è talmente irragionevole! ottima scoperta: D –

Il problema una volta riportato in https://connect.microsoft.com/IE/feedback/details/770636/ie10-box-shadow-bug-not-rendered-on-tables e impostare Closed as Will not Correzione, dal momento che IE è cessato e sostituito con Microsoft Edge. – Binyamin

Per impostazione predefinita IE è stata la creazione di modalità di compatibilità IE10 che dovrebbe essere sostituita con IE 9 utilizzando meta-tag. Quindi, ogni volta che verrà eseguito su altri browser, utilizzerà il CSS che sarà compatibile con IE9. Come in IE10 Compatibilità proprietà modalità box-shadow CSS è stato rimosso dalla libreria

Possiamo usare meta-tag in testa solo per cambiare il livello di compatibilità del documento:

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

la tag sta dimostrando che rendono questo documento compatibile con IE8 e IE9 per browser diversi da IE8 e IE9 passa da CSS a IE9.

fonte

2013-05-17 07:38:07

CSS Box-Shadow non funziona in IE

risposta

Problemi correlati