HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何消除位置相对按钮上的死区? (HTML / CSS)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我最近注意到样式< 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对点击事件的定义:

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

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

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

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

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

大佬总结

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

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: