转换锚点上的不可点击区域

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会出现在文本节点之外。这就是为什么不处理鼠标点击的原因。

如果我们在锚点内选择文本节点，它可以像这样（在mousedown之前和之后）可视化：

我想注意，该问题至少在Chrome，Opera和Safari中得到了重现，即使我将链接添加到href标记而不是处理点击事件。它也会使用<button>进行复制，而不是<input type="button">的问题，因为第一个使用内容，第二个使用内容。

有没有人有关于避免或解决这种行为的更好方法的想法？提前谢谢！

更新

我找到了一个使用streched＆＃34; stub＆＃34;的解决方案。 <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元素可以嵌套在anchor和buttons中，因此它不会破坏W3C HTML5 / XHTML5规则。

Aequanox使解决方案更加完美！看看下面的答案。

整个故事发布在这里：Animated anchor and button with css3

Answer 1

似乎: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;

去图......虽然它现在有效。

Answer 2

您可以避免插入标记，从而通过将其插入css：

来保持标记清理

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

虽然

，但文字无法选择