неверная высота в Chrome, когда тег "-webkit-none: none" и value = "" в теге <input>

Question

В Chrome v17.0.963.79 на Windows 7 у меня возникает необъяснимая проблема при применении стиля -webkit-appearance: none к тегу <input>. Проблема заключается в следующем:

У меня есть таблица стилей, назовем ее potatofoot.css , которая состоит из кода

.tbl {
    display: table;
}

.tblRow {
    display: table-row;
}

.tblCell {
    display: table-cell;
}

input {
    -webkit-appearance: none;
}​

и у меня есть HTML-файл, назовем его blech.html , который содержит код

<div class="tbl">

  <div class="tblRow">
    <label class="tblCell">Name</label>
    <input type="text" class="tblCell" value="I'M NOT EMPTY! OH, YEAH!">
  </div><!--end tblRow-->

</div><!--end tbl-->

Это отображается нормально (см. this jsfiddle ). Но когда я очищаю атрибут value, как в этот jsfiddle , вся таблица увеличивается с высоты 26px до высоты 31px, метка перемещается вниз, а ввод остается сверху .

Однако, если я удаляю -webkit-appearance: none;, все отображается одинаково с и без из заполненного атрибута значения.

Что происходит?

Answer 1

Протестировал его с помощью инструментов разработчика Chrome - испытал то же самое.

То, что происходит, заключается в том, что использование -webkit-appearance: none, похоже, устанавливает display: table-cell внутри.

Если вы переопределите это, установив display: inline-block (как без -webkit-appearance: none), оно будет отображаться правильно.

Answer 2

 <input type="text" value="">

удалите атрибут класса, и он отлично работает, пытаясь написать код CSS для поля ввода в своем контейнере, поскольку он уже определен в таблице стилей, и конфликтует с использованием другого класса tblCell