100％点击区的滑动门
作者：blank 来源：怿飞's Blog 发布时间：2007-06-14 22:00:00
BLOG地址：http://www.planabc.net/article.asp?id=107
学习标准的朋友，一般都会在学习的过程中接触到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;
}
查看效果：
运行代码框
方法一：使用相对位置负外边距
为了消除滑动门的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;
}
0
投稿猜你喜欢
在广大网友心目中，他们就是中国互联网搜索领域的三驾马车。无论这三家搜索巨头承不承认，在网友眼中总会来将他们进行对比比较。当然，更多时候的比较- 这是网站制作很流行的下拉列表两级连动的代码，也是很多人使用的代码。下面，先来看这段代码：<％dim countset&nbs
- 内容摘要：最近逛论坛经常看到有朋友问上传文件怎么重命名，怎么以当前日期来重命名上传文件。现在我就介绍一下重命名的方法，希望对大家有所帮助。本
- 在开发Web应用时，无一例外地需要访问数据库，以完成对数据的查询、插入、更新、删除等操作。受应用逻辑的影响，有时需要将多条数据库操作指令组成
- 你的主页或者你管理的网站有各种密码需要保护，把密码直接放在数据库或者文件中存在不少安全隐患，所以密码加密后存储是最常见的做法。在ASP.NE
- isnull在数据库查询中的应用，特别是再语句连接的时候需要用到 比如连接时候，某个字段没有值但是又要左连接到其他表上 就会显示空， isn
- 相信认真做过网页设计(Web Design)，或者关注过页面设计的同行都对“空格”不陌生。“空格”属于一类细节，很容易被忽略，但又比较影响效
- 判断某一个表的记录总数，对于一个开发者来说是最再常见不过的事，我想大家都常用的作法就是:以下为引用的内容：select count(*) f
- 代码如下:'************************************ '截取文字长度函数，支持UT
- 查询语言通过在查询表格中键入单词或短语，然后单击按钮执行查询，就可以在 Web 站点中搜索任意的单词或短语（例如，查询表格示例
- 今天呱呱发了一个网址给我看，大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢，以前在网上看过用锚点做的这类的效果。脑袋
- 1、存储过程基本语法: create procedure sp_name() begin ...... end; 2、如何调用： call
- 如何用通过Web访问OLAP数据？ <％ Set Conn=Server.CreateObject(″A
- 在上一期中作者向诸位简要介绍了 ASP 脚本语言之一 VBScript 的一些基本常识，本期将继续给大家讲解 VBScript 的脚本编写方
- SQLServer中建立与服务器的连接时出错的解决方案如下：步骤1：在SQLServer 实例上启用远程连接1.指向“开始->程序-&
- 今天暴风彬彬要讨论的网站可用 * ，是让你的网站文字链接提高一定的可用性，而且实现起来非常简单，其实这也算是提高用户体验的方法。扩大可点击区
- 本文介绍了几乎所有关于对象的基本概念，什么是对象，如何创建对象，对象的属性的设置和读取，删除属性的方法，构造函数，对象原型，父类，子类，继承
- 大家平时见到google的广告太多了，但有没有兴趣知道一下它的运行过程呢？下面我们一起来看看这个广告代码的执行过程，以及其中的一些精彩内容。
- 大多数网站维护都采用“多人协作，共同管理”方式。某个人负责一个（或者多个）栏目，他只能对他负责的栏目进
- 我为一大型网站做了一个论坛，也顺利通过了测试。由于是第一次做这方面的数据库，我不知道比其它网站上数据库差距有多大，是不是够优化。能推荐或介绍
