Решение проблемы смещения кнопки при клике в IE

Быстрый ответ

Для исключения применения стандартных стилей HTML-кнопки нам пригодится CSS. Значение none необходимо присвоить свойству appearance, а также установить определенные значения для border, background, padding, margin и outline:

button {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    outline: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

Теперь перед нами предстает простая бесстильная кнопка.

Особенности для Internet Explorer (IE)

В IE есть свои нюансы при работе со стилями кнопок, которые следует учесть:

Устраняем сдвиг содержимого кнопки при клике в IE

В IE кнопки при нажатии склонны менять свое положение из-за эффекта mousedown. Исправим это:

button::-moz-focus-inner,
button::-ms-expand {
    display: none;
}

button:active, 
button:focus {
    outline: orange auto;
}

Подробнее об этом расскажет наш спикер на видео

Убираем эффект утопленной кнопки

button {
    overflow: visible;
}

Удаляем стандартные эффекты при наведении и при фокусе

button:hover,
button:focus {
    background-color: lightgray;
}

Благодаря этим настройкам отображение кнопок будет отличаться единообразием в разных браузерах.

Работа со спрайтами

Спрайты могут поввлиять на корректное отображение кнопок в IE. Чтобы этого не случилось, зафиксируем размеры кнопки:

button {
    background-image: url('button-sprite.png');
    background-repeat: no-repeat;
    text-indent: -9999px;
}

Сброс при использовании Bootstrap 4

Если ваша рабочая среда основана на Bootstrap 4, то примените следующие свойства:

button {
    background: none;
    border: 0;
    padding: 0;
}

Сохраняем фокус

button:focus {
    outline: orange auto;
}

Замечание: Проверьте, поддерживаются ли применяемые стили на сайте caniuse.com.

Визуализация

Вот наглядные эмодзи, иллюстрирующие процесс сброса стилей:

До: [🎨🖌️🖌️🖌️] // Стилизованная кнопка в исходном состоянии
После:  [🖼️]          // Кнопка в первоначальном виде после удаления стилей

Процесс отмывки стилей:

🖼️ ← 🧽🛁 (Мы тщательно очистили все стили кнопки)

Этапы процесса:

Слои стилей: 🎨🖌️🖌️🖌️
Очистка: 🧽🛁
Результат: 🖼️  // Мы избавились от всего ненужного

Достигли цели, теперь это просто кнопка

Теперь вы знаете, как удалить все стили кнопки. Давайте далее сделаем её привлекательной!

Ключевые моменты при сбросе стилей

Не забывайте о том, что использование all: unset; может вызывать проблемы, в особенности, в IE.

Сохраняем доступность

Доступность является ключевым аспектом дизайна. Убедитесь, что кнопка остается удобной в использовании даже после радикальных изменений внешнего вида.

Обеспечиваем адаптивность

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

Полезные ссылки

1. <button>: Элемент Button – HTML: Язык гипертекстовой разметки | MDN — подробное описание атрибутов элемента <button> в HTML.
2. CSS Buttons — инструкция по стилизации и сбросу стилей кнопок при помощи CSS.
3. Overriding Default Button Styles | CSS-Tricks – CSS-Tricks — кастомизация внешнего вида кнопок за пределами стандартных решений.
4. CSS Basic User Interface Module Level 3 (CSS3 UI) — официальный документ, в котором описаны настройки элементов пользовательского интерфейса при помощи CSS.
5. Normalize.css: Обеспечивает согласованность в отображении элементов в различных браузерах. — использование Normalize.css для одинакового отображения элементов в разных браузерах.
6. Специфичность – CSS: Каскадные таблицы стилей | MDN — важность понимания специфичности в CSS для успешного переопределения стилей.