Я использовал некоторые кнопки некоторое время теперь, когда имеют подавленный эффект, поскольку они нажаты с помощью родственника положения и вершины: 1 пкс в: активный псевдокласс.
У меня были проблемы с событиями щелчка, не стреляя, и это оказалось из-за mousedown и событий mouseUp, не стреляющих в тот же элемент. Я сделал немного игры, чтобы удостовериться, что самый внутренний элемент покрыл целую кнопку и обнаружил, что проблема осталась.
Если я нажимаю прямо наверху текста тогда, ссылка спрыгивает (увольнение события mouseDown) и затем обратно (запускающий событие mouseUp), но щелчок не происходит. Если я нажимаю приятно посреди текста, или приятно далеко от текста все в порядке.
Единственная вещь, о которой я могу думать здесь, состоит в том, что событие mouseDown стреляет в textNode, и mouseup стреляет в элемент привязки как, поскольку textNode больше не находится под курсором. Ловля объектов-событий и рассмотрение целей с помощью поджигателя указывают дело обстоит не так, но я действительно не могу думать о другом объяснении. При чтении вокруг немного я могу найти некоторое упоминание о событиях, стреляющих textNodes в Safari, но ничем об этом несоответствии.
Следующий отрывок должен позволить Вам копировать проблему. Помните, необходимо нажать прямо наверху текста или пикселя или два выше, и эта проблема только происходит с одной строкой пикселей:
<style>
a.button-test {
display: inline-block;
padding: 20px;
background: red;
}
.button-test:active {
position: relative;
top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>
Бездельничание с CSS, не использование встроенного блока, увеличение высоты строки вместо того, чтобы дополнить и т.д., кажется, не имеют эффект здесь. Я попробовал много комбинаций. Большая часть моего тестирования была сделана в Firefox, чтобы позволить мне связывать с событиями и записывать то, что продолжается через поджигателя, но я также встречаюсь с этой проблемой в других браузерах.
У кого-либо есть вдохновение, кроме которого они могут предложить на этом, теряют активный переход? Я действительно хотел бы сохранить этот эффект, если я могу.
Большое спасибо,
Dom (никакая предназначенная игра слов)
Гораздо легче воспроизвести эту проблему, если вы измените стиль на Top: 10px