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

