如何消除位置相对按钮上的死区？ (HTMLCSS)

概述我最近注意到样式< a>的问题和< button>与显示块或内联块一起出现的标签,一定量的填充,以及相对于在以下情况下调整位置的位置： a { display: inline-block; padding: 3px 6px; background: #aff; }a:active { position: relative; top: 1px; left: 1px; } 问题是文本周围有一个1像素 我最近注意到样式< a>的问题和< button>与显示块或内联块一起出现的标签,一定量的填充,以及相对于在以下情况下调整位置的位置：

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

我也试过使用保证金代替仓位：相对;并尝试使用JavaScript设置.active而不是使用：active.

为了清楚起见：我正在谈论链接中的死区(在我的示例中为蓝色框),但在文本的边界框之外.这是我正在谈论的区域用深蓝色突出显示的图像：

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

@H_404_16@解决方法 当链接处于活动状态时,您将其移开,因此您不再单击该链接.使用它将解决问题：

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

见http://jsfiddle.net/ZCkpE/5/(感谢Kevin Gurney创建初始代码)

更新：

它似乎是浏览器中的一个错误(或预期的行为). W3.org对点击事件的定义：

The click event occurs when the
pointing device button is clicked over
an element. A click is defined as a
mousedown and mouseup over the same
screen location. The sequence of these
events is:

mousedown mouseup click

您显然是在同一屏幕位置点击.问题是mousedown事件在链接的填充上,并且mouseup事件在链接(文本)上.

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

>如果您在填充上进行了mousedown,则在填充上移动鼠标和鼠标,单击事件将触发.
>如果你在填充上移动鼠标但是现在鼠标移动到文本上,则没有单击事件.

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

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

总结

以上是内存溢出为你收集整理的如何消除位置相对按钮上的死区？ (HTML / CSS)全部内容，希望文章能够帮你解决如何消除位置相对按钮上的死区？ (HTML / CSS)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。