Encadré shadow box IE8

Question

J'ai un fiddle qui affiche une ombre encadrée. Je voudrais obtenir ce type d'affect dans I.E.

Y a-t-il une ombre de boîte de jquery que je peux appliquer, un travail autour des problèmes d'IE?

J'ai regardé htcPIE mais il ne s'est pas bien comporté avec mon application actuelle. D'autres indices?

Le code qui fonctionne dans les navigateurs modernes est:

-moz-box-shadow: inset 3px 3px 4px #000; 
-webkit-box-shadow: inset 3px 3px 4px #000; 
    box-shadow: inset 3px 3px 4px #000; 

Je regardais dans IE aime:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 

mais je manque l'encart sur la version IE.

Quelqu'un a de la chance avec ça?

Answer 1

La seule indication utile est la suivante:

Si ce n'est pas absolument nécessaire, omettez cet effet pour IE8. Il n'y a pas de filtre MS équivalent pour cela et si css3PIE n'a pas fonctionné pour vous, vous êtes à peu près perdu si vous ne voulez pas utiliser d'images.

Cependant une dernière solution serait de laisser l'utilisateur installer chrome-frame ce que je considère comme inacceptable pour de tels "gadgets". Lorsque vous développez vos sites, ne vous fiez jamais à ces fonctionnalités telles que box-shadow interne si vous ne voulez pas perdre la communauté Internet Explorer. Utilisez-le pour la décoration, mais ne faites rien qui pourrait nuire gravement à l'utilisabilité s'il n'est pas présent.

Answer 2

Il existe une solution qui fonctionne pour IE sans css3PIE. Dans IE 7/8, l'élément auquel l'ombre est appliquée doit avoir un jeu de couleurs d'arrière-plan. Sinon, l'ombre est héritée par les éléments enfants (y compris le texte).

voici comment je réalise l'ombre de la boîte dans tous les navigateurs ... Bien sûr, vous aurez besoin de personnaliser pour vos propres couleurs, force, direction, etc.

.shadow { 
    -moz-box-shadow: 2px 2px 3px #A7A7A7; 
    -webkit-box-shadow: 2px 2px 3px #A7A7A7; 
    box-shadow: 2px 2px 3px #A7A7A7; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')"; 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7'); 
} 

.wrapper{ 
    margin: 10px; 
    border: solid 1px #A7A7A7; 
    background-color: white;//or whatever color you need; however transparent doesn't work 
    } 

Ensuite, il suffit d'appliquer les deux classes

<div class="wrapper shadow"> 
    <div> 
      <p>Some text that used to have a shadow, but doesn't anymore</p> 
    </div> 
</div>