J'avais commencé à aborder le point dans le billet "Aucune marge ni espacement par defaut", voici quelques liens en rapport avec le sujet :
Même script que là mais avec le lien "afficher" qui change et devient "masquer" lorsque la div est affichée.
<script>
function visibilite(thingId,txtAff,txtMasque)
{
var targetElement; var targetElementLink;
targetElement = document.getElementById(thingId) ;
targetElementLink = document.getElementById(thingId+'Link');
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
targetElementLink.innerHTML = txtMasque ;
} else {
targetElement.style.display = "none" ;
targetElementLink.innerHTML = txtAff ;
}
}
</script>
<a href="javascript:visibilite('Div1','Afficher la zone 1','Masquer la zone 1');" id="Div1Link">Afficher la zone 1</a>
<div id="Div1" style="display:none;">contenu</div>
<br>
<a href="javascript:visibilite('Div2','...ou la zone 2','Masquer la zone 2');" id="Div2Link">...ou la zone 2</a>
<div id="Div2" style="display:none;">contenu</div>
J'ai eu quelques fois le bug, sans pour autant en trouver la cause exacte : une zone de texte disparait sous IE. Elle est pourtant bien là puisqu'en sélectionnant le texte il apparait.
Rajouter position:relative ou une largeur permet de fixer le problème.
Une pas mauvaise idée, trouvée sur leftjustified.net : déclarer les margin et les padding à zéro pour tous les élements de la page puis les restyler par la suite, afin d'éviter les différentes valeurs "par défaut" des navigateurs et d'obtenir (normalement 
) le même résultat partout.
A manier avec précaution car s'applique vraiment à tous les élements.
* { padding:0; margin:0; }
body { ... restyler ici les margin/padding ... }
h1, h2, h3, h4, h5, h6 { ... restyler ici les margin/padding ... }
...
<style>
#Preload { display:none; }
</style>
<div id="Preload">
<img src="image1.jpg">
<img src="image2.jpg">
...
</div>
[source]
