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

第 1 2 3 4 5 6 7 8 页