100％點擊區的滑動門

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

學習標準的朋友，一般都會在學習的過程中接觸到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;
}

查看效果：

運行代碼框

<!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=utf-8" /><title>CSS中滑動門技術</title><style type="text/css" media="screen">body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small;} html>body {font-size:small;} #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;}</style></head><body><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></body></html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

方法一：使用相對位置負外邊距

為了消除滑動門的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;
}

讓我們把CSS代碼整理最佳化一下：

#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;
}

查看效果：

運行代碼框

<!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=utf-8" /><title>CSS中滑動門技術</title><style type="text/css" media="screen">body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small;} html>body {font-size:small;} #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("right.gif") no-repeat right top; margin:0 0 0 9px; padding:0;}#header a { float:left; display:block; position:relative; left:-9px; margin-right:-9px; width:.1em; background:url("left.gif") no-repeat left top; padding:5px 15px 4px; text-decoration:none; font-weight:bold; color:#765;}#header > ul a {width:auto;}/* 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("right_on.gif");}#header #current a { background-image:url("left_on.gif"); padding-bottom:5px;}</style></head><body><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></body></html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

方法二：添加span標籤

這個方法只能說是練習，實驗用，真正布局的時候不推薦使用（僅是不推薦使用），畢竟添加了無語義的的span標籤。

首先在結構代碼中添加<span>標籤

<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>

有朋友或許問為什麼要添加<span>元素呢，其實理由很簡單，我們通過a和span來類比滑動門技術，而不是例子中的li和a，好處嘛，可以避免9px的盲點地區，因為<span>元素是包含在<a>元素裡的。這樣處理100%點擊就相對容易很多。

由於使用a和span類比，所以對於li我們不需要額外定義

#header li{
float:left;
margin:0;
padding:0;
}

而原本對li設定的部分，我們轉移到a中設定，設定a的背景為left圖片，不重複，左上對齊。並給a設定左內邊距9px（left圖片的寬度），即span的顯示不遮擋left圖片。

#header a {
background:url("left.gif") no-repeat left top;
padding-left:9px;
}

對於span，將顯示原例子中a中的設定，設定span的背景為right圖片，不重複，右上對齊。並在span的左內邊距減去a設定的9px左內邊距，即span的左內邊距為6px。同樣為了一致性，我們要解決IE5/Mac的問題。

#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。

#header a {
float:left;
}

相對應的，對於current選取器裡的圖片位置也要做一點調整：

#header #current a {
background-image:url("left_on.gif");
color:#333;
}

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

讓我們把CSS代碼整理最佳化一下：

#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;
}

查看效果：

運行代碼框

<!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=utf-8" /><title>CSS中滑動門技術</title><style type="text/css" media="screen">body { background:#fff; margin:0; padding:0; color:#000; font:x-small/1.5em Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small;} html>body {font-size:small;}#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; margin:0; padding:0;}#header a { float:left; display:block; background:url("left.gif") no-repeat left top; padding-left:9px; text-decoration:none; font-weight:bold; color:#765;}#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 a:hover { color:#333;}#header #current a { background-image:url("left_on.gif"); color:#333;} #header #current span{ background-image:url("right_on.gif"); padding-bottom:5px;}</style></head><body><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></body></html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

100％點擊區的滑動門

聯繫我們

熱門內容

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

100％點擊區的滑動門

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support