Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы мои входные данные оставались одинаковыми во всех браузерах и на всех устройствах — если это возможно?

Как мне сделать так, чтобы мои входные данные оставались одинаковыми во всех браузерах и на всех устройствах — если это возможно?

#css #input

Вопрос:

У меня есть некоторые проблемы , которые возникают только у меня iPad Pro 12.9 , но не на телефонах или настольных компьютерах.

🐞 включено : Safari Chrome Firefox

введите описание изображения здесь

 input[type=text], input[type=email], input[type=time] {
    color: white;
    background-color: black;
    font-size: 1em;
    width: 100%;
    border: solid 1px white;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
}

Как сделать так, чтобы мои входные padding данные хорошо выглядели во всех браузерах и на всех устройствах?

Комментарии:

1. Попробуйте добавить высоту строки, чтобы быть более конкретным для Safari.

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

3. @ArnoTenkink Пытался, min-height: 34px; line-height:1.42857143; но все равно безуспешно;

4. Поскольку во входных данных нет (однородного) текста, как вы можете оценить заполнение? Я не вижу никакой разницы (кроме увеличения экрана и красного креста)…

Ответ №1:

Во-первых, вам нужно убедиться, что ваши входные данные не перегружены другим объявлением, которое часто вызывает проблему, с которой вы сталкиваетесь здесь, особенно в отношении свойств line-height и. font-size Установите значение высоты строки для line-height: normal входных элементов. Использование input[] селектора имеет низкую специфичность в каскаде CSS, поэтому его можно обойти.

Если вышеуказанные значения не переопределяются из другой части вашей таблицы стилей , которую вы можете использовать box-sizing:border-box line-height: normal в своих входных элементах. Скорее всего, вам придется немного увеличить значение заполнения, чтобы получить необходимый эстетический вид.

Ответ №2:

Как насчет того, чтобы использовать all: unset;
Честно говоря, я узнал об этом только вчера и еще не использовал его, но, похоже, он пользуется широкой поддержкой.

Вот небольшая демонстрация. Хотя я использовал нахальство.

Снимок экрана с iPad Pro: введите описание изображения здесь

Скриншот из Chrome (в Linux): введите описание изображения здесь

Ответ №3:

Вам действительно не нужно заполнять верхнюю и нижнюю части ввода, поэтому вы можете удалить его, просто используйте padding: 0 10px , если какой-либо браузер не центрирует текст по вертикали, вы можете выровнять высоту строки с высотой, и это должно быть нормально.

также применение box-sizing: border-box; правила, вероятно, позволит избежать различий между браузерами в том, как они отображают отступы.

Метки: ,