點擊（）在跨度按鈕頂部不起作用

我一直試圖讓使用結構簡單的按鈕：點擊（）在跨度按鈕頂部不起作用

<a href="#/category/portfolio/" class="filter" data-filter="*"> 
<span class="button">Tout</span> 
</a>

它的工作原理，除了按鍵的最頂端。我們可以點擊它，CSS激活，但不是相關的jQuery。

感謝您的幫助！

2012-01-20 Sylphe

對我的作品（鉻16） – amosrivera

@amosrivera - 真的嗎？我在Chrome 16中看到了這個問題，如果您在頂部點擊右側（如頂部幾個像素）。 –

我的錯你是對的，點擊前2像素時出現問題 – amosrivera

的問題是這樣的規則：

.button:active { 
    position: relative; 
    top: 3px; 
}

隨着移動按鈕下降3個像素，當釋放鼠標按鈕時，光標不在按鈕上方，因此操作未被註冊。如果你註釋掉這段代碼，你可以看到它修復了這個問題。

嘗試改爲爲按鈕按下時不會將按鈕移動到一側或另一側的情況提出不同的效果。

2012-01-20 22:46:07 Behrang

+1，發現了，我正在尋找一些沿着這些線條的東西，但你打敗了我:) –

+1。我想知道是否它與這條規則有關。 – ClarkeyBoy

+1！這裏更新的小提琴與解決方案：http://jsfiddle.net/vqrdW/13/ – phemios

-1

<a href="#/category/portfolio/" class="filter" data-filter="*"> 
<span class="button" style="display:block;width:100%;height:100%">Tout</span> 
</a>

不工作...對不起... 這裏是編輯的工作版本：

a.filter { 
text-decoration:none; 
display:block; 
float:left; 
line-height:40px; /*(or whatever is that button's height)*/ 
}

2012-01-20 22:39:27

如果您已經設置了顯示模塊，則設置寬度和高度是無用的。其他按鈕也可以工作並使用跨度。 – amosrivera

對不起！我編輯了我的帖子！ –

添加填充的標籤，而不是.button：

a.filter { 
    padding: 8px 14px 10px; 
}

2012-01-20 22:48:20 Lamariffic

.span:active { 
    pointer-events: none; 
}

2015-11-04 22:52:50

你能解釋爲什麼這個工作，所以有你的答案背景？ – Shawn

回答