Почему щелчки мышью не всегда работают для стилизованных кнопок ввода?

Question

В нашем приложении мы используем стилизованные кнопки ввода для отправки форм.По какой-то причине вы должны точно щелкнуть по ним, чтобы клик был зарегистрирован.Более половины времени, похоже, что кнопка нажата (то есть изменяется при mousedown / mouseup), но ничего не происходит, и мы должны нажать снова.Если мы просто удалим стиль CSS, кнопка будет работать нормально все время.

Пример:

Нашим пользователям очень нравится внешний вид стилизованных кнопок,но немного раздражены, не зная, прошло ли событие click.Есть ли простой способ решить эту проблему?

Обновление

Я наконец смог аккуратно воспроизвести это в jsfiddle: http://jsfiddle.net/xRK4C/3/.Вы можете увидеть поведение, если щелкнуть несколько верхних левых пикселей кнопки с закругленным углом.Я думаю, это потому, что кнопка перемещается при нажатии, что приводит к тому, что мышь находится за пределами кнопки при наведении мыши.Однако наши пользователи хотели этого, так есть ли какой-нибудь хороший способ сохранить эффект 3d, не жертвуя областью щелчка?

Answer 1

Я считаю, что это относительное положение на :active.Я думаю, что перемещение кнопки запутывает события мыши.Вместо этого я бы предложил изменить поля.

РЕДАКТИРОВАТЬ: поля также не работают, как и перевод CSS 2.

Вам нужно каким-то образом переместить "изображение" кнопки, не перемещая саму кнопку (таким образом область, на которую нажимают), но я сейчас не могу думать ни о чем.

Answer 2

Зашел на сайт JSFiddle и поиграл со стилем.

Я заметил, что зависание на краю кнопки прошло успешно, но щелчка не было.

Итак, я изменил left:2px; top:2px; на left:0px; top:0px; и наведение, конечно, все еще работало, но щелчок был успешным по краю кнопки.