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

Question

[Петр Волханов]

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

Вот какой 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;}

Во всех браузерах все ОК:


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


Как это можно исправить?

Comments

[Руслан Полин]

А отступ сверху должен быть?

[Степан Крапивин]

а в каких "во всех браузерах"? Кроме firefox и edge есть только браузеры на движке вебкит которые отображают одинаково. Так что получается не "во всех" а в одном.

[Руслан Полин]

Степан: старую оперу не учитываете.)

[Степан Крапивин]

Руслан: она при жизни не была популярна, а сейчас при новой версии совсем протухла. Так что вряд ли ТС тестировал на старой опере :-)

[Петр Волханов]

Руслан: нет, отступ сверху уже убрал!

[Петр Волханов]

Степан: IE10, IE11, Opera, Chrome

[Руслан Полин]

Евгений Привалов: откройте консоль браузера, у вас там отступ слева задан на 5px, замените его.

Answer 1

[Дмитрий Лузанов]

Используйте text-indent: 10px, а не padding

Comments

[Петр Волханов]

Predve4niy не уверен, что сработает для placeholder текста...

[Дмитрий Лузанов]

Евгений Привалов: из-за вашей неуверенности теперь спецификацию переписывать?

font properties
color
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
opacity

Это поддерживаемые свойства для ::placeholder

Answer 2

[Петр Волханов]

Все пофиксил, добавил CSS:

#homepage #s {padding-left:10%;}

Answer 3

[Nevada18]

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