Текст заполнителя в моих текстовых полях неправильно выровнен в Chrome - PullRequest
Новая
       38

Текст заполнителя в моих текстовых полях неправильно выровнен в Chrome

4 голосов
/ 06 марта 2011

У меня есть проблема в Google Chrome, где текст заполнителя расположен слишком высоко на моем веб-сайте. http://www.myinvestmentdecision.com.au

Нажмите "Обратная связь", и вы увидите, что текст в заполнителе расположен слишком высоко.У меня есть сценарий-заполнитель, но он отключается, когда понимает, что в chrome есть поддержка заполнителя.

Просто чтобы доказать это, вот jsfiddle самой формы: http://jsfiddle.net/RAANa/

Должно быть, CSS вещь.Есть идеи?

Ответы [ 3 ]

6 голосов
/ 06 марта 2011

Удалите line-height:28px из вашего css ниже. 

.form input[type="text"], .form input.text, .form .calculate_box .calc {
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #A1A1A1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width: 284px;
}

См. Скриншот с удалением line-height
enter image description here

3 голосов
/ 06 марта 2011

Я думаю, что ваша высота строки: 28 отсюда: (form.css) 

.form { font-family: arial, sans-serif; }
.form input[type=text],
.form input.text,
.form .calculate_box .calc{
    background: transparent url(../images/input-background.png) repeat-x left top;
    border: 1px solid #a1a1a1;
    margin-left: -1px;
    height: 28px;
    line-height: 28px;
    display: block;
    width:284px;
}

вызывает проблему.Помните, что это объявление относится к содержимому тега, а также к самому тегу.Это может помочь вам, когда дело доходит до форм ..

0 голосов
/ 06 марта 2011

Не уверен, что это «правильный» способ сделать это, но добавление отступа 5px в поле ввода будет центрировать заполнитель для поля электронной почты.

Просто добавьте это в свой CSS, где бы оно ни относилось к этому полю электронной почты: 

padding: 5px;
...