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

发布时间：2020-12-14 18:35:31 所属栏目：资源来源：网络整理

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

我最近注意到样式< 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

解决方法

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

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中,如果单击文本,它将起作用.如果单击填充,则不会激活：活动样式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!