上轉化錨

Question

這裏非點擊區域是我的小提琴：http://jsfiddle.net/olexander/7hB8C/

我有一個錨，它是風格的按鈕（樣式簡化，以顯示這個問題）。

HTML：

<a href="javascript:void(0)" class="button demo">Button</a> 

CSS：

.button { 
    border: none; 
    outline: none;  
    text-decoration: none; 
    display: inline-block; 
} 

.button:active { 
    transform: scale(0.8, 0.8); 
    -webkit-transform: scale(0.8, 0.8); 
    -moz-transform: scale(0.8, 0.8); 
    -o-transform: scale(0.8, 0.8); 
    -ms-transform: scale(0.8, 0.8); 
} 

.demo { 
    padding: 40px; 
    margin: 20px; 
    font-size: 5em; 
    color: black; 
    background-color: lightgray; 
} 

的問題是，有鏈接按鈕內的非點擊區域。 我可以解釋，錨內有一個文本節點，當mousedown進入文本節點時，在變換之後，mouseup會出現在文本節點之外。這就是爲什麼沒有處理鼠標點擊的原因。

如果我們選擇錨內的文本節點，它可以顯現像這樣（鼠標按下前後）：

我想注意到，該問題已在Chrome瀏覽器，歌劇至少轉載和Safari，即使我把一個鏈接到href標籤，而不是處理點擊事件。它也轉載<button>，而不是<input type="button">的問題，因爲第一個使用內容，第二個值。

有沒有人有更好的方法來避免或解決這種行爲的想法？提前致謝！

UPDATE：

我找到了一個解決方案使用streched 「存根」 <span>覆蓋可點擊區域：

<a href="javascript:void(0)" class="button"><span class="stub"></span>Button</a> 

和尾樣式：

.button > span.stub { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

這個版本在這裏出版：http://jsfiddle.net/olexander/7hB8C/20/

存根可以通過javascript動態添加，但這個想法保持不變。 由於內聯span元素可以嵌套在錨點和按鈕中，因此不會破壞W3C HTML5/XHTML5規則。

和Aequanox使解決方案完美！看看下面的答案。

整個故事在這裏公佈：Animated anchor and button with css3

Answer 1

您可避免在插入標籤，從而mantaining標記清潔劑，通過在CSS中插入這樣的：

.button:before{ 
    content:''; 
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
} 

文本將無法選擇雖然

Answer 2

看來:active過渡替代click事件。我認爲這是一個瀏覽器錯誤。

在這裏，我已經改變了:active到一個類名.active並應用在你的事件處理程序：

$('#linkbutton').click(function(){ 
    $(this).addClass('active');  
    $(this).delay(200).queue(function() { $(this).removeClass('active');}) 
    $('#logContainer').append('<span>clicked </span>');  
}); 

出於某種原因，直到我改變了這種沒有工作。從按鈕：

display: inline-block; 

到：

float: left; 

去圖...它現在雖然。