Переключатель / флажок перемещается при нажатии в Safari 8 и 9 на компьютере Mac

Question

У меня есть форма с флажками и переключателями, мне нужно задать ей высоту и выровнять по вертикали по центру, чтобы выровнять по метке (она может иметь различную высоту строки)

    input[type="checkbox"],input[type="radio"] {
    margin:0px;
    vertical-align: -webkit-baseline-middle;
    float: none;
    height: 38px;
  }

label {
 line-height: 38px;
}

Вы могли видеть это в http://jsfiddle.net/9my3ksf3/1/

Answer 1

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

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

Вот отличная статья, сравнивающая эффекты установки ширины и высоты для переключателей в разных браузерах: http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/