Schiebetürcode für 100 % Klickfläche

Freunde, die Standards studieren, kommen im Laufe des Lernens normalerweise mit der CSS-Schiebetürtechnologie in Berührung. Vielleicht haben Sie auch diesen Artikel „Schiebetürtechnologie in CSS“ gelesen. Ich habe es noch nicht gelesen. Es spielt keine Rolle, ob Sie den obigen Artikel gelesen oder den Inhalt vergessen haben. Sie können auf den Artikellink oben klicken, um ihn zuerst zu verstehen oder zu lesen.

Im Beispiel einer Schiebetür im Artikel „Schiebetürtechnologie in CSS“ haben Sie bei sorgfältigem Experimentieren möglicherweise festgestellt, dass es im Linkbereich einen toten Winkel von 9 Pixeln gibt, der nicht angeklickt werden kann Unter IE kann nur auf die Größe des Textteils geklickt werden, der gesamte Schaltflächenblock kann nicht angeklickt werden. Was wir erwarten können, ist, dass der gesamte Tastenblock angeklickt werden kann und keine toten Winkel zulässig sind.

Wie sollen wir es dann erreichen? Lassen Sie uns gemeinsam einige Lösungen besprechen:

Der Einfachheit halber verschieben wir zunächst den Code in „Sliding Door Technology in CSS“:
XHTML-Teil:

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

CSS-Teil:

#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;  
}