Почему слетели стили для чекбоса в сафари?

Question

[katiiisha]

Сделала адаптация под мобильные устройства. Открыла с айфона через сафари чекбоксы сползли вниз, а когда открывала на андроиде все супер. Не понимаю в чем проблема. Пробовала задать такое разрешение как и на телефоне на компе через панель разработки, никаких багов не было.

Вставлю фрагмент стилей для чекбокса

<label>
<input type="checkbox"  class="check_input">
<span class="check_box"></span>
</label>

.check_input  {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

 .check_box {
         display: inline-block;
         width: 75px;
         height: 75px;
         background-image: url(../image/check_none.svg);
}

Пример того, что слетает:

Comments

[Модератор]

Ссылка удалена модератором.
Нарушение п.5.7 Регламента.

Скриншот фрагмента кода удалён модератором.
Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[katiiisha]

короче разобралась сама, если вдруг кому-то понадобится, то держите
все ломалось из-за display:inline-block
Поэтому делаем так:

label {
    position: relative;
}
.check_box {
           position: absolute;
           width: 75px
           height: 75px
           background-image: url(../image/check_none.svg);

ну и отступы настроить