samedi 11 novembre 2006, 15:26
La transparence en CSS avec Internet Explorer
... c'est quelque chose de très basique. La propriété opacity
appliquée à n'importe quel élément permet de le rendre transparent. Bon, chez Microsoft, vu qu'on en fait jamais rien comme tout le monde, il faut utiliser une propriété spécifique filter
. Mais à la limite, une fois qu'on est prévenu, c'est pas génant. Pour rendre un div transparent, le code CSS devrait donc être :
body { background : #369; } .monbloc { background : #fff; opacity : .2; filter : alpha(opacity=20); }
Sauf que ça, ça ne fonctionne pas sous IE ! Vous pouvez vérifier vous même avec cet exemple.
Etonnant non ? Pourtant comme tout le monde j'ai déjà utilisé et vu fonctionner la transparence sous IE ! Alors comment expliquer ce phénomène ? Problème de doctype ? D'encodage du document ?
Et bien en fait, Internet Explore gère la transparence dans 2 cas seulements : l'élément a une position absolue (position:absolute
) ou l'élément a une hauteur fixe. J'imagine bien les réunion de brainstorming des équipes de développeurs de Microsoft :
- Bon les gars, faut qu'on implémente la transparence, quelqu'un a une idée ?
- C'est de la touchette la transparence !
- Tiens au lieu de parler fait tourner l'Absolut Vodka ! (bon d'accord elle était facile celle là)
- Au fait René t'as fini de débugger la propriétéheight : auto
?
- Nan c'est pas trivial !
- T'façon le code est bon !
Alors donc comme la position absolue n'est pas très pratique quand il faut rendre transparent un élément dans le corps de la page, il faut ruser.
Pour IE 6, la propriété height
se comporte comme min-height
. On peut utiliser le hack suivant :
.monbloc { height : 1px; } /* pour les autres navigateurs */ * > .monbloc { height: auto; }
Mais IE 7 va interpréter le hack, et donc appliquer un height : auto
. Ce qui vaut mieux puisqu'ils ont corrigé le bug de height
, et donc si on essaye d'appliquer une hauteur de 1px ça va tout casser. La solution est donc d'utiliser un hack spécial pour IE 7 et d'appliquer un min-height
tout nouveau dans cette version du navigateur.
/* pour IE 7 */ *+html .monbloc { min-height : 1px; }
Le code complet devient donc :
body { background : #369; } .monbloc { background : #fff; opacity : .2; filter : alpha(opacity=20); /* pour IE 6 */ height : 1px; } /* pour les autres navigateurs */ * > .monbloc { height: auto; } /* pour IE 7 */ *+html .monbloc { min-height : 1px; }
Vous pouvez regarder ce deuxième exemple.
Par cgo2, dans Développement web
Commentaires
en fait il suffit d'initialiser la taille H/W du bloc après l'affichage du bloc avec un setTimeout ex:
ce css suffit:
.monbloc {
background : #fff;
opacity : .2;
filter : alpha(opacity=20);
}
et après l'affichage (inialisation de bloc par le navigateur)
tu lance :
setTimeout(function(){document.getElementById('div_transp').style.height='100%';},1);
ne me demandez pas pourquoi ! bug ie
Il y a une autre solution à ceci que je considère plus élégante (question de goût). Il s'agit en fait du recyclage d'une solution visant à palier au fait que IE ne supporte pas min-height et qui consiste à tirer avantage d'un autre bogue de IE (manque de prise en charge correct de l'attribut !important).
Alors voilà:
.monbloc {
background: white;
opacity: 0.2;
filter: alpha(opacity=20);
/* pour IE 7 */
min-height: 1px;
/* pour IE 6 */
height: auto !important;
height: 1px
}
Salut
Merci pour ces explications dont j'avais besoin. question subsidiaire : est ce qu'on peut appliquer à une image? Je souhaite faire une page avec un poeme en deux langue et donc mettre une image en transparence d'un livre ouvert, pour ensuite mttre les poemes sur chaque page??
Merci pour vos réponse
un roumain ()
? inutile tout ça sur IE7, ça marche sans. Un simple filter suffit. Peut-être une mise à jour a été appliquée...