100%點擊區的滑動門代碼

學習標準的朋友，通常都會在學習的過程中接觸到css滑動門技術，或許大家也都看過這篇文章《css中的滑動門技術》，如果你還沒接觸過或還沒看過上文或有點忘記內容，也沒關係，可以點擊上面的文章鏈接，先了解或溫習一遍。

在《css中的滑動門技術》一文中的滑動門例子，大家仔細實驗，或許已經發現，鏈接區有9像素的盲點無法點擊，而且在ie下，只能點擊文字部分大小，不能點選整個按鈕區塊。而我們或許期望的是整個按鈕區塊都可以點擊，而且不允許有盲點存在。

那我們又該如何去實現呢？下面我們一起來探討一些解決方法：

首先為了方便我們先把《css中的滑動門技術》中的程式碼移過來：
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>

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