|
|
BLOG地址：http://www.planabc.NET/article.ASP?id=107
學(xué)習(xí)標(biāo)準(zhǔn)的朋友，一般都會在學(xué)習(xí)的過程中接觸到CSS滑動門技術(shù)，或許大家也都看過這篇文章《CSS中的滑動門技術(shù)》，如果你還沒接觸過或還沒看過上文或有點忘記內(nèi)容，也沒關(guān)系，可以點擊上面的文章鏈接，先了解或溫習(xí)一遍。
在《CSS中的滑動門技術(shù)》一文中的滑動門例子，大家仔細(xì)實驗，或許已經(jīng)發(fā)現(xiàn)，鏈接區(qū)有9像素的盲點無法點擊，而且在IE下，只能點擊文字部分大小，不能點擊整個按鈕區(qū)塊。而我們或許期望的是整個按鈕區(qū)塊都可以點擊，并且不允許有盲點存在。
那我們又該如何去實現(xiàn)呢？下面我們一起來探討一些解決方法：
首先為了方便我們先把《CSS中的滑動門技術(shù)》中的代碼移過來：
XHTML部分：
復(fù)制代碼 代碼如下:
<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部分：
復(fù)制代碼 代碼如下:
#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;
}
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
方法一：使用相對位置負(fù)外邊距
為了消除滑動門的9px的盲點區(qū)域，設(shè)置li的外邊距為9px（9px為left圖片的寬度大小），li的背景為right圖片，不重復(fù)，右上對齊。
#header li {
background:url("right.gif") no-repeat right top;
margin-left:9px;
}
然后讓a向左移動9px，覆蓋掉盲點區(qū)域，如何移動呢？可對a使用相對位置（position:relative;），用負(fù)值移動9px（left:-9px;）。由于li的寬度等于a的寬度，所以當(dāng)a位置相對左移9px時，li的右邊就會多出9px的盲區(qū)，如何解決呢？我們使用a的負(fù)外邊距來解決（margin-right:-9px;）。
#header a {
position:relative;
left:-9px;
margin-right:-9px;
}
設(shè)置left圖片為a的背景，不重復(fù)，左上對齊，并設(shè)置文字的內(nèi)邊距，注意現(xiàn)在a的區(qū)域為整個按鈕的區(qū)域，所以padding-left和padding-right的值都應(yīng)為15px。
#header a {
background:url("left.gif") no-repeat left top;
padding:5px 15px 4px;
}
另注意一個細(xì)節(jié)：在IE中鏈接的區(qū)域為文字區(qū)域而不是按鈕區(qū)域，而在其他對標(biāo)準(zhǔn)支持比較好的瀏覽器里是按鈕區(qū)域。為了解決這個問題，我們給IE中的a指定個固定寬度來觸發(fā)IE的layout（可以選用.1em，1px，1%等值），但這樣一來a在其他對標(biāo)準(zhǔn)支持比較好的瀏覽器里則會識別這個寬度，我們選用對標(biāo)準(zhǔn)支持比較好的瀏覽器識別而IE6不識別的子選擇器來讓a的寬度變?yōu)閍uto。
#header a {width:.1em;}
#header > ul a {width:auto;}
相對應(yīng)的，對于current選擇器里的圖片位置也要做一點調(diào)整：
#header #current {
background-image:url("right_on.gif");
}
#header #current a {
background-image:url("left_on.gif");
padding-bottom:5px;
}
HTML/CSS技術(shù)：100%點擊區(qū)的滑動門代碼第1/2頁，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
