100%点击区的滑动门

这个方法只能说是练习，实验用，真正布局的时候不推荐使用（仅是不推荐使用），毕竟添加了无语义的的span标签。

首先在结构代码中添加<span>标签：

<div id="header">
 <ul>
  <li><a  href="#"><span>Home</span></a></li>
  <li  id="current"><a  href="#"><span>News</span></a></li>
  <li><a  href="#"><span>Products</span></a></li>
  <li><a  href="#"><span>About</span></a></li>
  <li><a  href="#"><span>Contact</span></a></li>
 </ul>
</div>

有朋友或许问为什么要添加<span>元素呢，其实理由很简单，我们通过a和span来模拟滑动门技术，而不是例子中的li和a，好处嘛，可以避免9px的盲点区域，因为<span>元素是包含在<a>元素里的。这样处理100%点击就相对容易很多。由于使用a和span模拟，所以对于li我们不需要额外定义

#header  li{
 float:left;
 margin:0;
 padding:0;
}

而原本对li设置的部分，我们转移到a中设置，设置a的背景为left图片，不重复，左上对齐。并给a设置左内边距9px（left图片的宽度），即span的显示不遮挡left图片。

#header a {
 background:url("left.gif") no-repeat left top;
 padding-left:9px;
}

对于span，将显示原例子中a中的设置，设置span的背景为right图片，不重复，右上对齐。并在span的左内边距减去a设置的9px左内边距，即span的左内边距为6px。同样为了一致性，我们要解决IE5/Mac的问题。

#header span {
 float:left;
 padding:5px 15px 4px  6px;
 display:block;
 background:url(”right.gif”) no-repeat right  top;
}
/* Commented Backslash Hack hides rule from IE5-Mac  \*/
#header span {
 float:none;
}
/* End IE5-Mac hack  */

在此方法中我们依旧会碰到上例中碰到的在IE中链接的区域为文字区域而不是按钮区域问题。如何解决呢，当然你也可以用上例中的方法解决。不过我们还可以，给a浮动来触发IE下的layout 。

#header a  {
 float:left;
}

相对应的，对于current选择器里的图片位置也要做一点调整：

#header #current a  {
 background-image:url("left_on.gif");
 color:#333;
}
#header  #current  span{
 background-image:url("right_on.gif");
 padding-bottom:5px;
}

让我们把CSS代码整理优化一下：

#header  li {
 float:left;
 margin:0;
 padding:0;
}
#header a {
 float:left;
 display:block;
 background:url("left.gif") no-repeat  left top;
 padding-left:9px;
}
#header span {
 float:left;
 padding:5px 15px 4px  6px;
 display:block;
 background:url("right.gif") no-repeat right  top;
}
/* Commented Backslash Hack hides rule from IE5-Mac  \*/
#header span {
 float:none;
}
/* End IE5-Mac hack */
#header  #current a  {
 background-image:url("left_on.gif");
 color:#333;
}
#header  #current  span{
 background-image:url("right_on.gif");
 padding-bottom:5px;
}