border: 1px solid transparent Sous Internet Explorer 6 ( css , hack )

Astuce du jour : Comment faire comprendre à ce bon Internet Explorer 6.0 la couleur transparent appliquée sur un border ?

Une réponse peut déjà vous passer par la tête : " baaaahhhh un padding: 1px;, non ?! "...
oui mais voilà, Internet Explorer a une petite tendance à bugguer avec le CSS ( quelle découverte ! ) et pour fixer ces petits soucis, un border: 1px solid #fff; règle parfois le problème aussi étrange que celui puisse paraître, et donc la réponse a ma question prend tout son sens...

<style type="text/css" media="screen">

div.mon-test {
	width: 100%; height: 100px;
	border: 1px solid transparent;
}

</style>

<!-- Propriété propre à Internet Explorer 6.0 -->
<!--[if IE 6]>
<style type="text/css" media="screen">

div.mon-test {
	border-color: pink;
	filter: chroma(color=pink);
}

</style>
<![endif]-->

Cette solution n'est pas sans modifier le comportement du div impliqué, j'ai notamment remarqué que les propriétés de l'overflow n'étaient plus les mêmes. En bref, cette solution pourra ( je l'espère) vous aider, mais risque aussi de vous recréer d'autres problèmes ultérieurement. Je serais personnellement plus adepte d'un div dans un div.

Mais n'oubliez jamais cet adage : " Trop de div, Tue le div ! ".

Source du hack : http://acidmartin.wordpress.com/

---