Текст-заполнитель не вертикально центрирован в Safari

18

Есть ли у вас какая-либо идея о том, как получить атрибут placeholder для вертикального центра в сафари? Хотя, когда вы начинаете печатать, текст идеально по центру.

    
задан Donny 17.02.2012 в 06:52
источник
  • вы могли бы предоставить какой-то код? –  Aram Kocharyan 17.02.2012 в 06:57

6 ответов

4

Прекрасно работает для меня:

<input type="text" name="first_name" placeholder="Search" style="height: 50px;">

Попробуйте изменить это:

#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}
    
ответ дан Aram Kocharyan 17.02.2012 в 07:00
источник
  • Обычно я считаю, что лучше использовать высоту и высоту строки для ввода текста. IIRC gecko делает что-то странное в противном случае. По-видимому, в некоторых случаях также работает webkit. –  Dagg Nabbit 17.02.2012 в 07:06
  • Это обычно то, с чем я тоже иду. Также не забудьте использовать этот метод в других полях, по какой-то причине я получил другую страницу в сафари для хром, поэтому я использовал это в качестве примера. –  Aram Kocharyan 17.02.2012 в 07:07
  • Это прекрасно! Однако удаление высоты строки испортит IE. Я сохранил его там, но просто добавил / 9 после него, что, кажется, исправить это. –  Donny 17.02.2012 в 07:25
  • Да, игра с CSS обычно требуется, когда вы покрываете 5 разных браузеров :) –  Aram Kocharyan 17.02.2012 в 07:27
15

Самый простой способ - использовать как свойства line-height , так и height CSS. Просто дайте текстовому вводу line-height с тем же значением, что и его height .

Кстати, ваш живой сайт выглядит хорошо для меня в хроме 16.

    
ответ дан Dagg Nabbit 17.02.2012 в 07:00
источник
13

Для меня лучшим решением является использование line-height: normal и hack для IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px%pre%/; /* for IE 8 */
}
    
ответ дан Mila 18.04.2014 в 10:34
источник
  • Удивительно! Это единственное решение, которое я нашел (только с высотой и строкой), который работает как на IE8, так и на Safari. –  1'' 11.07.2014 в 04:49
6

И эта ошибка тоже. Установка высоты линии в ems исправила это для меня. Он выглядит так же, как в Chrome, Safari (рабочий стол и iOS) и Firefox. и я добавил трюк \ 9, чтобы получить вертикальное центрирование в IE. вот мой css

height: 36px;       
line-height: 1.2em;
line-height: 26px; /*for IE */
    
ответ дан neocoder 07.10.2012 в 22:12
источник
  • Это спасло меня !!! Спасибо! –  ForOhFor 18.12.2012 в 21:14
4

-Safari Solution-

Я застрял в этой проблеме в течение долгого времени, несмотря на использование

input::-webkit-input-placeholder { line-height:normal!important; }

Оказывается, что с высотой строки в непосредственном input -ном элементе нарушалась моя input::webkit-input-placeholder line-height.

Расширенное решение:

Я удалил высоту строки в моем стиле ввода и исправил мою проблему.

    
ответ дан Ariella 13.06.2016 в 23:14
источник
  • Лучший ответ ...! –  Mike Barwick 31.08.2017 в 21:23
  • Эта вещь -webkit-input-placeholder также фиксирует текст заполнителя в сафари, например. нижняя часть буквы "g" –  Lev Lukomsky 18.09.2017 в 12:33
1

Для меня это сработало хорошо:

line-height: inherit;
    
ответ дан Fellow Stranger 13.02.2018 в 23:56
источник