Проблема с сайтом
уважаемые. Заметил дилемму такого рода: загрузил сайт на хостинг, на ПК в Dev Tools всё отлично (выбираю размер экрана как на IPhone 7), но когда захожу на этот же сайт с телефона (тот же IPhone 7) - сайт отображается не совсем так, как на пк в Dev Tools.
Ниже приведу пример, на скриншоте #1 (ПК) есть желтый border при фокусе, та и вообще там есть только нижняя рамка, без закругления. На скриншоте #2, 3 (IPhone 7) у этой рамки появляется закругление и кнопка ведет себя по-другому.
Прошу помощи, как это можно решить?
код кнопки:
.signUp__button {
color: #fff;
background-color: rgba(255, 255, 255, 0);
border: 2px solid #fff;
border-radius: 20px;
padding: .2em 1.5em .2em 1.5em;
margin-bottom: 1.2rem;
cursor: pointer;
transition: all .2s ease-in-out;
font-size: 16px;
font-weight: 400;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
} <button class="signUp__button">SIGN UP</button>Ответы (2 шт):
я понял о чём Вы спрашиваете.
у каждого браузера своё отображение нативных элементов (таких как button, input, select и т.д). все они немного отличаются стилистическим оформление, как в Вашем случае. это происходит из-за того, что у браузеров разные движки для отображения страниц (еще у каждого движка есть свои разные порты, но это не важно) и даже разный ShadowDOM. если Вы будете просматривать стили вашего элемента в DevTool, Вы можете увидеть стили user agent stylesheet. именно эти заводские стили браузер задает своим нативным элементам.
чтобы изменить/убрать их, нужно перебить заводские стили своими стилями. в Вашем случае просто каждому input type="text" задайте стиль border-radius: none. таким образом Вы перепишете заводские стили.
Это стандартная проблема кросбраузерности, все браузеры имеют свои предустановки стилей стандартных элементов. Для решения проблемы используют reset.css, вот например такой:
https://gist.github.com/DavidWells/18e73022e723037a50d6
он перезаписывает стили стандартных элементов. Вот и всё