4

I have buttons which have been given click depth (i.e. they move down a few pixels on :active state) but they are causing problems in that sometimes the button is clicked and nothing happens.

<button>Button</button>

button:active {
    margin-top: 5px;
}

I have illustrated the problem in a jsfiddle:

http://jsfiddle.net/helenst/vUU55/

In Chrome, there is a thin strip above and below the text, height equal to the click depth, in which click events do not fire. (e.g. try clicking a pixel or two above the 'B') Both mousedown and mouseup are received, but click does not fire.

In Firefox and Opera, there is an area of the same size at the top of the button in which the mouse click does not respond. I find this slightly more logical in that the mousedown is inside the button but the mouseup is outside it. If I click down in this area but drag the mouse back into the button before releasing it, the click is activated.

However, it still doesn't completely make sense - if I wrap a container around the button (so that all button states are contained inside it), and detect events on the container, the problem still occurs.

If I remove the click depth, everything is fine.

I suppose I could make it respond to mousedown events and then detect mouseups on the document, this might get around it - but it violates normal button behaviour and I'd like to have a non-javascript solution. Can anybody help?

4

1 回答 1

1

If you can make the :active style work using padding-top (or anything inside the border - even setting the border-top to 5px could work, sorry untested). Though of course that breaks your styling somewhat; a background top-aligned horizontal bar image could replace the top border if you need it in there, though a hacky idea).

Apologies, cannot test in newer browsers at present. I've seen this type of button several places before but cannot remember any offhand to test how well they cope with this issue/what code they use.

Almost made this a new answer, but SO is less fond of that: The other alternative that I've seen, though harder to add really big depth (movement), is to use inset and outset in the border styles.

于 2012-11-22T14:56:17.043 回答