Question

我最近注意到样式<a>和<button>标签存在问题，这些标签与显示块或内联块，一些填充量以及位置相对于调整位置时出现：active eg

a { display: inline-block; padding: 3px 6px; background: #aff; }
a:active { position: relative; top: 1px; left: 1px; }

问题是文本周围有一个1像素的不可见框，其中点击未被浏览器或JavaScript注册，但动画仍然会出现。这种情况发生在（至少）Windows上的Firefox和Chrome中。

这是一个有效的例子： http://dl.dropbox.com/u/1186571/Test.htm

我也尝试使用保证金代替position: relative;，并尝试使用javascript设置.active，而不是使用:active。

请注意：我正在谈论链接中的死区（在我的示例中为蓝色框），但在文本的边界框之外。这是我正在谈论的区域用深蓝色突出显示的图像：

http://dl.dropbox.com/u/1186571/example.png

Answer 1

当链接处于活动状态时，您将其移开，因此您不再单击该链接。使用它可以解决问题：

a:active { 
    padding: 4px 5px 2px 7px;
}

请参阅http://jsfiddle.net/ZCkpE/5/（感谢Kevin Gurney创建初始代码）

<强>更新

似乎是浏览器中的错误（或预期的行为）。 W3.org对点击事件的定义：

点击事件发生时   点击指点设备按钮   一个元素。点击被定义为a   mousedown和mouseup在同一个   屏幕位置。这些序列   事件是：


鼠标按下

鼠标松开

点击

您显然是在点击同一屏幕位置。问题是mousedown事件位于链接的填充上，mouseup事件位于链接（文本）上。

见http://jsfiddle.net/ZCkpE/8/。

如果您在填充上进行了操作，请在填充上移动鼠标和鼠标，单击事件触发。
如果您在填充上移动了鼠标，但现在鼠标移动到文本，则没有点击事件。

这意味着点击事件不会将填充和文本本身视为相同的元素。

解决方案，不使用太多“黑客”：制作一个重叠的div：http://jsfiddle.net/ZCkpE/13/。适用于Chrome，Firefox。在IE中，如果单击文本，它将起作用。如果单击填充，则：活动样式未激活。

Answer 2

这是一个可怕而丑陋的黑客，但你可以这样做：不是移动实际的链接元素或其中的某些内容，而是移动一个单独的链接，其中包含您在同一位置放置的相同文本。当然，您还必须隐藏实际链接。它需要大量额外的标记，并且移动只能在JavaScript中完成，但至少它可以完成并且有效。

HTML：

<span class="link_container"><a href="#" class="main"><span>Click me</span></a> 
<span class="replacement"><a href="#" class="aux"><span>Click me</span></a></span></span>

CSS：

.link_container { display: inline-block; position: relative; }
a.main { display:inline-block; position: relative; z-index: 2; }
a.main span { position: relative; top: -1000px; }
.link_container span.replacement { position: absolute; left: 0; top: 0; z-index: 1; }
.link_container span.replacement span { display: inline-block; background-color: #fab; }
.link_container span.replacement span.offset { position: relative; left: 5px; top: 5px; }

JS在每次点击时移动文字：

$(document).ready(function() { 
$("a").click(function() {
    $("span.replacement span").toggleClass("offset");
    $("p").text($("p").text()+" clicked!");
    return false; 
});
});

http://jsfiddle.net/Vfc5r/36/

在Chrome和IE8中测试过。 Chrome会对.main链接和IE8对.aux链接作出反应。可能它实际上并没有修复仍然对移动的链接作出反应的浏览器，但是对浏览器的反应是对静态链接的改进。

Answer 3

感谢@zzzzBov和@Ryan Kinal，我有一个合理的解决方案，即绕过a标签上的点击事件并改用鼠标：

$("a").click(false).mouseup(function() { window.location = $(this).attr('href'); });

更复杂（也更准确）的解决方案是使用jQuery插件重新创建click事件：

(function($) {
  $.fn.newClick = function(fn) {
    if (fn === undefined) { 
      fn = function() { window.location = $(this).attr("href"); }; 
    }
    this.click(false);
    this.mousedown(function() {
      $(this).data("clicked", true);
    });
    this.mouseup(function(e) {
      var response = true;
      if ($(this).data("clicked")) {
        response = fn.call($(this), e);
      }
      $(this).data("clicked", false);
      return response; 
    });
  };
})(jQuery);

$(document).ready(function() {
  $("a.js").newClick(function(e) {
    $("p").text($("p").text() + " clicked!");
    return false;
  });
  $("a").newClick();
});

这里我们首先绑定任何自定义事件，然后覆盖所有a标记的默认点击行为。这是一个演示：

http://jsfiddle.net/ZCkpE/16/

如何消除位置相对按钮上的死区？（HTML / CSS）

3 个答案:

如何消除位置相对按钮上的死区？ （HTML / CSS）

3 个答案:

如何消除位置相对按钮上的死区？（HTML / CSS）