HTML5 заполнитель css padding

Question

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

В любом случае,Вот код для CSS.( EDIT : это сгенерированный CSS из sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

А вот простой HTML:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Довольно просто?по какой-то причине заполнитель отключен, но при попытке ввода в поле ввода текст выравнивается.Кажется, что вы можете изменить только цвет (для webkit) заполнителя, но если я попытаюсь отредактировать заполнение содержащего ввода, это разрушит дизайн ввода! вырывает волосы

Вот экраны заполнителя и поля ввода с вводом текста:

РЕДАКТИРОВАТЬ :

Пока я прибегнул к этому плагину jquery .

Он работает прямо из коробки и исправляет проблему с моим хромом.Я все еще хотел бы раскрыть, в чем проблема (если это связано с МОИМ хромом или чем-то подобным)

Я почти уверен, что это не стили, так как Джон Каттерфельд воспроизвел это без проблем, поэтому я 'Я надеюсь, что кто-то еще может указать мне правильное направление относительно того, почему это происходит со мной (мой клиент также Chrome. Так что это, вероятно, является родным для Chrome / OSX, если Джон использует Windows)

Answer 1

Заполнитель не подвержен влиянию line-height и padding несовместимо в браузерах.

Я нашел другое решение.

VERTICAL-ALIGN.Вероятно, это единственный раз, когда это работает, но попробуйте это и пропустите множество строк кода CSS.

Answer 2

Я заметил проблему в тот момент, когда я обновил Chrome на OS x до последней стабильной версии (9.0.597.94), так что это ошибка Chrome, и, надеюсь, она будет исправлена.

У меня возникает соблазн даже непопытаться обойти это и просто ждать исправления.Это просто будет означать больше работы по его устранению.

Answer 3

Я создал скрипку, используя ваш скриншот в качестве фонового изображения и убрав лишнюю наценку, и, похоже, он работает нормально

http://jsfiddle.net/fLdQG/2/ (требуется браузер webkit)

Это работает для вас? Если нет, можете ли вы обновить скрипку с точной разметкой и CSS?