变形锚点上的不可点击区域

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、Opera 和 Safari 中重现，即使我放置了指向 href 标记的链接而不是处理点击事件。它也与<button> 一起复制，而不是<input type="button"> 的问题，因为第一个使用内容，第二个使用值。

是否有人对避免或解决此行为的更好方法有想法？提前致谢！

更新：

我找到了一个解决方案，使用拉伸的“存根”<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

您可以避免插入标签，从而保持标记清洁，通过将其插入 css：

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

文本将无法选择

Answer 2

似乎:active 转换正在替换点击事件。我认为这是一个浏览器错误。

这里我已将 :active 更改为类名 .active 并应用在您的事件处理程序中：

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

由于某种原因，直到我将 .button 更改为：

display: inline-block;

到：

float: left;

想想看……不过现在可以了。