Kod pintu gelangsar untuk kawasan klik 100%.

Rakan yang belajar standard biasanya akan berhubung dengan teknologi pintu gelangsar CSS dalam proses pembelajaran Mungkin anda juga pernah membaca artikel ini "Teknologi pintu gelangsar dalam CSS". t membacanya lagi Tidak kira jika anda telah membaca artikel di atas atau terlupa kandungannya Anda boleh klik pada pautan artikel di atas untuk memahami atau menyemaknya terlebih dahulu.

Dalam contoh pintu gelangsar dalam artikel "Teknologi Pintu Gelangsar dalam CSS", jika anda mencuba dengan teliti, anda mungkin mendapati terdapat titik buta 9 piksel dalam kawasan pautan yang tidak boleh diklik dan di bawah IE, hanya bahagian teks yang boleh diklik saiznya, keseluruhan blok butang tidak boleh diklik. Apa yang kami jangkakan ialah keseluruhan blok butang boleh diklik dan tiada titik buta dibenarkan.

Lalu bagaimana kita harus mencapainya? Mari kita bincangkan beberapa penyelesaian bersama:

Pertama sekali, untuk kemudahan, mari kita alihkan kod dalam "Teknologi Pintu Gelangsar dalam CSS":
Bahagian 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>

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