铬上的div按钮上的小死角 [英] Small dead space on a div button in chrome

问题描述

我无法解释这一个。我有一个按钮的div。我使用：active psuedo类和position：relative;稍微向下移动，点击时向右移动，给它一个动画。由于某种原因，Chrome中的这个按钮在文本和按钮边缘之间有一个很小的死角。 psuedo类仍然会触发，但按钮上的Javascript不会。如果我删除了相对位置，问题就会消失。这种情况也发生在Firefox中，但Firefox中的死空间位于按钮移开的边缘，这很有意义，但也需要修复。

我创建了一个JSFiddle来展示这个问题： http://jsfiddle.net/dillydadally/CUHA7/6/

任何想法为什么会发生这种情况？有没有办法解决它？

解决方案

CSS。这是因为边距：10px; 在 #btn

编辑

如果您使用 onmousedown ，而不是 onclick ，它就可以正常工作。 解释：

伪类在onClick之前被激活。如果您将：active的值从2px更改为20px。即使您点击按钮的中间位置，也会看到这种情况。

因此，在激活后设置左侧和顶部的新值后，鼠标不会再也无法注册点击（ 新闻发布 ）了。

但是 onmousedown 仍然被触发，因为它不依赖于鼠标按钮的释放。

I can't explain this one. I've got a div that's a button. I use the :active psuedo class and position: relative; to move it slightly down and to the right when clicked, to give it an animation. For some reason, there is a small dead space on this button in Chrome about half way between the text and edge of the button. The psuedo class still fires but the Javascript on the button does not. If I remove the position relative, the problem goes away. This also happens in Firefox, but the deadspace in Firefox is on the very edge where the button moves out of the way, which makes sense but also needs to be fixed.

I created a JSFiddle to show the problem: http://jsfiddle.net/dillydadally/CUHA7/6/

Any idea why this is happening? Is there a way to fix it?

解决方案

CSS. It's because of margin: 10px; on #btn

EDIT

If you use onmousedown rather onclick it will work.

Explaining:

The pseudo class is being activate before the onClick. If you change the values of :active from 2px to 20px. You will see this happening even if you are clicking on the middle of the button.

So after the new values of left and top set by the :active, the mouse isn't on top of the div anymore and can't register the click (press and release).

But onmousedown is still triggered because it doesn't depend on the release of the mouse's button.

这篇关于铬上的div按钮上的小死角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！