黑云压城城欲摧 山雨欲来风满楼
这几天做页面时不小心看到了选项卡的一个问题：当2个选项卡之间有间距，鼠标在选项卡之间移动时鼠标会跳，事例如下（第一个），看起来不是很“和谐”，不过我只找到2种非IE6下的解决方法，第一种方法点击时会产生与背景大小不一致的虚框，第二种方法其实就是给ul加上手型鼠标。可是IE6的表现很糟糕：
IE6下，边缘的时候a:hover已经被触发了，可指针却不是小手
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡的切换的视觉效果</title>
<style type="text/css">
<!--
* {padding:0px;margin:0px;}
dl, ul {list-style:none;}
body {font-size:12px;}
a {text-decoration:none;color:#333;}
a:hover {color:#FF6600;}
div {clear:both;margin:20px auto;width:500px;height:150px;background:url(http://cosa.elianba.com/attachment/200805/1210790854_96063666.gif) repeat-x 0 -22px}
.a {margin:0px;padding:10px;width:480px;height:100px;background:none;}
ul {display:block;padding-top:15px;width:260px;height:22px;}
li {display:inline;}
textarea {width:380px;height:100px;overflow-x:hidden;}
li a{display:block;float:left;margin-left:4px;width:58px;height:22px;line-height:25px;text-align:center;background:url(http://cosa.elianba.com/attachment/200805/1210790854_96063666.gif) no-repeat -62px 0px;overflow:hidden;}
li a:hover{background-position: 0px 0px}
.o li a{margin-left:0px;padding-left:4px;width:58px;background:url(http://cosa.elianba.com/attachment/200805/1210790854_96063666.gif) no-repeat -58px 0px;overflow:hidden;}
.o li a:hover{background-position: 4px 0px}
.s ul {cursor:pointer;}
-->
</style>
</head>
<body>
<div class="c">
<ul>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
<div class="a"><textarea name="textfield" cols="50" rows="7" id="textfield">ul {display:block;padding-top:15px;width:300px;height:22px;}
li {display:inline;}
textarea {width:380px;height:100px;overflow-x:hidden;}
li a{display:block;float:left;margin-left:4px;width:58px;height:22px;line-height:25px;text-align:center;background:url(http://cosa.elianba.com/attachment/200805/1210790854_96063666.gif) no-repeat -62px 0px;overflow:hidden;}
li a:hover{background-position: 0px 0px}
</textarea>
</div>
</div>
<div class="o">
<ul>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
<div class="a"><textarea name="textfield" cols="50" rows="7" id="textfield">
.o li a{margin-left:0px;padding-left:4px;width:58px;background:url(http://cosa.elianba.com/attachment/200805/1210790854_96063666.gif) no-repeat -58px 0px;overflow:hidden;}
.o li a:hover{background-position: 4px 0px}</textarea></div>
</div>
<div class="s">
<ul>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
<div class="a"><textarea name="textfield" cols="50" rows="7" id="textfield">.s ul {cursor:pointer;}</textarea></div>
</div>
</body>
</html>
« 上一篇：从PW学到的分页写法
无尽的任务：下一篇 »
