100%点击区的滑动门代码第1/2页


答案：BLOG地址：http://www.planabc.net/article.asp?id=107
学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。
那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：
XHTML部分： 
复制代码 代码如下:

<div id="header">  
  <ul>  
    <li><a href=>    <li id="current"><a href=>    <li><a href=>    <li><a href=>    <li><a href=>  </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;  
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<base href=>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS中滑动门技术</title> 
<style type="text/css" media="screen"> 
body { 
  background:#fff; 
  margin:0; 
  padding:0; 
  color:#000; 
  font:x-small/1.5em Georgia,Serif; 
  voice-family: "\"}\""; voice-family:inherit; 
  font-size:small; 
}  
html>body {font-size:small;} 
   
#header { 
 float:left; 
 width:100%; 
 background:#DAE0D2 url("/articleimg/2007/02/4495/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("/articleimg/2007/02/4495/left.gif") no-repeat left top; 
 margin:0; 
 padding:0 0 0 9px; 
} 
#header a { 
 float:left; 
 display:block; 
 background:url("/articleimg/2007/02/4495/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("/articleimg/2007/02/4495/left_on.gif"); 
} 
#header #current a { 
 background-image:url("/articleimg/2007/02/4495/right_on.gif"); 
 color:#333; 
 padding-bottom:5px; 
} 
</style> 
</head> 

<body> 
<div id="header"> 
  <ul> 
    <li>Home</li> 
    <li id="current">News</li> 
    <li>Products</li> 
    <li>About</li> 
    <li>Contact</li> 
  </ul> 
</div> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

方法一：使用相对位置负外边距 

为了消除滑动门的9px的盲点区域，设置li的外边距为9px（9px为left图片的宽度大小），li的背景为right图片，不重复，右上对齐。 

#header li { 
  background:url("right.gif") no-repeat right top; 
  margin-left:9px; 
} 
然后让a向左移动9px，覆盖掉盲点区域，如何移动呢？可对a使用相对位置（position:relative;），用负值移动9px（left:-9px;）。由于li的宽度等于a的宽度，所以当a位置相对左移9px时，li的右边就会多出9px的盲区，如何解决呢？我们使用a的负外边距来解决（margin-right:-9px;）。 

#header a { 
  position:relative; 
  left:-9px; 
  margin-right:-9px; 
} 
设置left图片为a的背景，不重复，左上对齐，并设置文字的内边距，注意现在a的区域为整个按钮的区域，所以padding-left和padding-right的值都应为15px。 

#header a { 
  background:url("left.gif") no-repeat left top; 
  padding:5px 15px 4px; 
} 
另注意一个细节：在IE中链接的区域为文字区域而不是按钮区域，而在其他对标准支持比较好的浏览器里是按钮区域。为了解决这个问题，我们给IE中的a指定个固定宽度来触发IE的layout（可以选用.1em，1px，1%等值），但这样一来a在其他对标准支持比较好的浏览器里则会识别这个宽度，我们选用对标准支持比较好的浏览器识别而IE6不识别的子选择器来让a的宽度变为auto。 

#header a {width:.1em;} 
#header > ul a {width:auto;} 
相对应的，对于current选择器里的图片位置也要做一点调整： 

#header #current { 
  background-image:url("right_on.gif"); 
} 
#header #current a { 
  background-image:url("left_on.gif"); 
  padding-bottom:5px; 
}
上一个：收集的web页面html中常用的特殊符号大全
下一个：文章内容页广告浮于左上角的解决办法
更多图片编程知识: