Code porte coulissante pour zone de clic 100%

Les amis qui étudient les normes entreront généralement en contact avec la technologie des portes coulissantes CSS au cours du processus d'apprentissage. Peut-être avez-vous également lu cet article "La technologie des portes coulissantes en CSS". Je ne l'ai pas encore lu Peu importe si vous avez lu l'article ci-dessus ou si vous avez oublié le contenu, vous pouvez d'abord cliquer sur le lien de l'article ci-dessus pour le comprendre ou le réviser.

Dans l'exemple de porte coulissante de l'article "Technologie de porte coulissante en CSS", si vous expérimentez attentivement, vous aurez peut-être découvert qu'il y a un angle mort de 9 pixels dans la zone de lien sur lequel on ne peut pas cliquer, et sous IE, seule la partie texte peut être cliquée, le bloc de boutons entier ne peut pas être cliqué. Ce à quoi nous pouvons nous attendre, c'est que l'ensemble du bloc de boutons puisse être cliqué et qu'aucun angle mort ne soit autorisé.

Alors comment devrions-nous y parvenir ? Discutons ensemble de quelques solutions :

Tout d'abord, pour plus de commodité, déplaçons le code dans "Sliding Door Technology in CSS" :
Partie XHTML :

<div id="header">  
  <ul>  
    <li><a href="#">Home</a></li>  
    <li id="current"><a href="#">News</a></li>  
    <li><a href="#">Products</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>

Partie CSS :

#header {  
  float:left;  
  width:100%;  
  background:#DAE0D2 url("bg.gif") repeat-x bottom;  
  font-size:93%;  
  line-height:normal;  
}  
#header ul {  
  margin:0;  
  padding:10px 10px 0;  
  list-style:none;  
}  
#header li {  
  float:left;  
  background:url("left.gif") no-repeat left top;  
  margin:0;  
  padding:0 0 0 9px;  
}  
#header a {  
  float:left;  
  display:block;  
  background:url("right.gif") no-repeat right top;  
  padding:5px 15px 4px 6px;  
  text-decoration:none;  
  font-weight:bold;  
  color:#765;  
}  
/* Commented Backslash Hack  
   hides rule from IE5-Mac \*/  
#header a {float:none;}  
/* End IE5-Mac hack */  
#header a:hover {  
  color:#333;  
}  
#header #current {  
  background-image:url("left_on.gif");  
}  
#header #current a {  
  background-image:url("right_on.gif");  
  color:#333;  
  padding-bottom:5px;  
}