eprivalov
@eprivalov
Учусь

Проблема кроссбраузерности. Как победить?

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

Вот какой CSS я применяю к форме:

#homepage #s{border-radius: 25px; background-color: #337346; border: 2px solid #337346;}
#homepage #s::-webkit-input-placeholder{color: #76AC87; padding-left: 10%;}
#homepage #s:-moz-placeholder{color: #76AC87; opacity: 1; padding-left: 10%;}
#homepage #s::-moz-placeholder{color: #76AC87; opacity: 1; padding-left: 10%;}
#homepage #s:-ms-input-placeholder{color: #76AC87; padding-left: 10%;}
#homepage #s::-ms-input-placeholder{color: #76AC87; padding-left: 10%;}
#homepage #s:focus::-webkit-input-placeholder{color: transparent;}
#homepage #s:focus::-moz-placeholder{color: transparent;}
#homepage #s:focus:-moz-placeholder{color: transparent;}
#homepage #s:focus:-ms-input-placeholder{color: transparent;}
#homepage #s:focus::-ms-input-placeholder{color: transparent;}
#homepage #searchsubmit{position: absolute; left:0; top:0; background-color: transparent; color: #76AC87;}


Во всех браузерах все ОК:
082d6be303cf4c5b9da4519875ea37ed.png

А вот в Mozilla Firefox и Microsoft Edge надпись наезжает на иконку поиска:
c73d3a391e58488ea8f915e6c23f76f3.png

Как это можно исправить?
  • Вопрос задан
  • 239 просмотров
Решения вопроса 2
Используйте text-indent: 10px, а не padding
Ответ написан
eprivalov
@eprivalov Автор вопроса
Учусь
Все пофиксил, добавил CSS:

#homepage #s {padding-left:10%;}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Nevada18
попробуйте задать отступы в рх, а не в %.
тоже подобное было, что лиса % не воспринимала почему то
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы