学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。
那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：
XHTML部分：
1
2
3
4
5
6
7
8
9
|
<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部分：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
#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 图片，不重复，右上对齐。
1
2
3
4
|
#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;）。
1
2
3
4
5
|
#header a {
position:relative;
left:-9px;
margin-right:-9px;
}
|
设置 left 图片为 a 的背景，不重复，左上对齐，并设置文字的内边距，注意现在a的区域为整个按钮的区域，所以 padding-left 和 padding-right 的值都应为 15px。
1
2
3
4
|
#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 。
1
2
3
4
5
6
|
#header a {
width:.1em;
}
#header > ul a {
width:auto;
}
|
相对应的，对于 current 选择器里的图片位置也要做一点调整：
1
2
3
4
5
6
7
|
#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px;
}
|
让我们把 CSS 代码整理优化一下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#header li {
background:url("right.gif") no-repeat right top;
margin:0 0 0 9px;
}
#header a {
position:relative;
left:-9px;
margin-right:-9px;
width:.1em;
background:url("left.gif") no-repeat left top;
padding:5px 15px 4px;
}
#header > ul a {
width:auto;
}
#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px;
}
|
方法二：添加span标签
这个方法只能说是练习，实验用，真正布局的时候不推荐使用（仅是不推荐使用），毕竟添加了无语义的的 span 标签。
首先在结构代码中添加 标签：
1
2
3
4
5
6
7
8
9
|
<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>
|
有朋友或许问为什么要添加 元素呢，其实理由很简单，我们通过 a 和 span 来模拟滑动门技术，而不是例子中的 li 和 a ，好处嘛，可以避免 9px 的盲点区域，因为 元素是包含在 元素里的。这样处理 100% 点击就相对容易很多。由于使用 a 和 span 模拟，所以对于li我们不需要额外定义
1
2
3
4
5
|
#header li{
float:left;
margin:0;
padding:0;
}
|
而原本对 li 设置的部分，我们转移到 a 中设置，设置a的背景为 left 图片，不重复，左上对齐。并给a设置左内边距 9px（left 图片的宽度），即 span 的显示不遮挡 left图片。
1
2
3
4
|
#header a {
background:url("left.gif") no-repeat left top;
padding-left:9px;
}
|
对于 span ，将显示原例子中a中的设置，设置 span 的背景为 right 图片，不重复，右上对齐。并在 span 的左内边距减去 a 设置的 9px 左内边距，即 span 的左内边距为 6px。同样为了一致性，我们要解决 IE5/Mac 的问题。
1
2
3
4
5
6
7
8
9
10
11
|
#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 。
相对应的，对于 current 选择器里的图片位置也要做一点调整：
1
2
3
4
5
6
7
8
|
#header #current a {
background-image:url("left_on.gif");
color:#333;
}
#header #current span{
background-image:url("right_on.gif");
padding-bottom:5px;
}
|
让我们把 CSS 代码整理优化一下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#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;
}
|
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自：PlanABC.net
首页 
278次
相关文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线