... 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.