CSS-высота поля пароля в Mobile Safari и Chrome

У меня проблема с высотой поля пароля, отличной от высоты текстового поля над ним, даже если я применяю style="height:22px" непосредственно к обоим элементам.

Текущий HTML:

  <h2>Username 
    <label>
      <input name="email" type="text" id="email" style="height:22px" />
      </label>
  </h2>
  <h2>Password  
    <label>
      <input name="password" type="password" id="password"style="height:22px"  />
      </label>
  </h2>

Текущий CSS:

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding-left:10px;
    height:22px;
    width:364px;
}

Это отображает (с атрибутом стиля или без него) как

скриншот

Как сделать так, чтобы он отображался одинаковой высоты и почему это происходит?


css mobile-safari mobile-chrome
person jerrygarciuh    schedule 14.03.2013    source источник
comment
Вам нужен пробел между атрибутами: id="password" style="height:22px"   -  person Steve    schedule 15.03.2013
comment
@Стив - добавлено; без изменений   -  person jerrygarciuh    schedule 15.03.2013
comment
@Adrift Добавлено в таблицу стилей; обновление не показало изменений, но не знаю, как принудительно обновить в мобильном браузере.   -  person jerrygarciuh    schedule 15.03.2013
comment
Вы пытались добавить явный line-height в свой CSS?   -  person Steve    schedule 15.03.2013
comment
Итак, текущий стиль #logonForm input[type=text], #logonForm input[type=password] { font-size:18px; border-radius:8px; padding-left:10px; height:initial; line-height:22px; width:364px; -webkit-appearance: none; } очищен кеш Safari, но не изменился в отображении; также удален атрибут стиля из html   -  person jerrygarciuh    schedule 15.03.2013
comment
Можете дать ссылку? Кроме того, почему вы устанавливаете только padding-left, а не все padding. Попробуйте: padding: 0 0 0 10px;   -  person Steve    schedule 15.03.2013
comment
Может быть, это прояснит ситуацию? pockyway.com/logon.php   -  person jerrygarciuh    schedule 15.03.2013
comment
Стив, похоже, дело было в этом. Добавление определенного заполнения делает Safari правильным. Кажется, я не могу найти способ очистить кеш Chrome, но я доволен кемпингом. Хотите добавить свое решение в качестве ответа?   -  person jerrygarciuh    schedule 15.03.2013
comment
Обнаружен кеш в Chrome в разделе «Конфиденциальность». Очистка показывает исправленные размеры. Ура!   -  person jerrygarciuh    schedule 15.03.2013
comment
Рад, что это сработало. Просто добавил это как ответ. :)   -  person Steve    schedule 15.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, вам придется добавить явное заполнение для ВСЕХ сторон, а не только заполнение слева:

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding:0 0 0 10px;
    height:22px;
    width:364px;
}
person Steve    schedule 14.03.2013