BLOG地址：http://www.planabc.net/article.asp?id=107

學(xué)習(xí)標(biāo)準(zhǔn)的朋友，一般都會(huì)在學(xué)習(xí)的過(guò)程中接觸到CSS滑動(dòng)門(mén)技術(shù)，或許大家也都看過(guò)這篇文章《CSS中的滑動(dòng)門(mén)技術(shù)》，如果你還沒(méi)接觸過(guò)或還沒(méi)看過(guò)上文或有點(diǎn)忘記內(nèi)容，也沒(méi)關(guān)系，可以點(diǎn)擊上面的文章鏈接，先了解或溫習(xí)一遍。

在《CSS中的滑動(dòng)門(mén)技術(shù)》一文中的滑動(dòng)門(mén)例子，大家仔細(xì)實(shí)驗(yàn)，或許已經(jīng)發(fā)現(xiàn)，鏈接區(qū)有9像素的盲點(diǎn)無(wú)法點(diǎn)擊，而且在IE下，只能點(diǎn)擊文字部分大小，不能點(diǎn)擊整個(gè)按鈕區(qū)塊。而我們或許期望的是整個(gè)按鈕區(qū)塊都可以點(diǎn)擊，并且不允許有盲點(diǎn)存在。

那我們又該如何去實(shí)現(xiàn)呢？下面我們一起來(lái)探討一些解決方法：

首先為了方便我們先把《CSS中的滑動(dòng)門(mén)技術(shù)》中的代碼移過(guò)來(lái)：
XHTML部分：

CSS部分：


方法一：使用相對(duì)位置負(fù)外邊距

為了消除滑動(dòng)門(mén)的9px的盲點(diǎn)區(qū)域，設(shè)置li的外邊距為9px（9px為left圖片的寬度大小），li的背景為right圖片，不重復(fù)，右上對(duì)齊。

#header li {
  background:url("right.gif") no-repeat right top;
  margin-left:9px;
}
然后讓a向左移動(dòng)9px，覆蓋掉盲點(diǎn)區(qū)域，如何移動(dòng)呢？可對(duì)a使用相對(duì)位置（position:relative;），用負(fù)值移動(dòng)9px（left:-9px;）。由于li的寬度等于a的寬度，所以當(dāng)a位置相對(duì)左移9px時(shí)，li的右邊就會(huì)多出9px的盲區(qū)，如何解決呢？我們使用a的負(fù)外邊距來(lái)解決（margin-right:-9px;）。

#header a {
  position:relative;
  left:-9px;
  margin-right:-9px;
}
設(shè)置left圖片為a的背景，不重復(fù)，左上對(duì)齊，并設(shè)置文字的內(nèi)邊距，注意現(xiàn)在a的區(qū)域?yàn)檎麄€(gè)按鈕的區(qū)域，所以padding-left和padding-right的值都應(yīng)為15px。

#header a {
  background:url("left.gif") no-repeat left top;
  padding:5px 15px 4px;
}
另注意一個(gè)細(xì)節(jié)：在IE中鏈接的區(qū)域?yàn)槲淖謪^(qū)域而不是按鈕區(qū)域，而在其他對(duì)標(biāo)準(zhǔn)支持比較好的瀏覽器里是按鈕區(qū)域。為了解決這個(gè)問(wèn)題，我們給IE中的a指定個(gè)固定寬度來(lái)觸發(fā)IE的layout（可以選用.1em，1px，1%等值），但這樣一來(lái)a在其他對(duì)標(biāo)準(zhǔn)支持比較好的瀏覽器里則會(huì)識(shí)別這個(gè)寬度，我們選用對(duì)標(biāo)準(zhǔn)支持比較好的瀏覽器識(shí)別而IE6不識(shí)別的子選擇器來(lái)讓a的寬度變?yōu)閍uto。

#header a {width:.1em;}
#header > ul a {width:auto;}
相對(duì)應(yīng)的，對(duì)于current選擇器里的圖片位置也要做一點(diǎn)調(diào)整：

#header #current {
  background-image:url("right_on.gif");
}
#header #current a {
  background-image:url("left_on.gif");
  padding-bottom:5px;
}

最新評(píng)論