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