html - 当 <input> 标签上的 "-webkit-appearance: none"和值 =""时，Chrome 中的高度不正确

Question

在 Windows 7 上的 Chrome v17.0.963.79 中，我在应用 -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属性，如 this jsfiddle ，整个表格从26px的高度增长到31px的高度，label移动到底部，input停留在顶部。

但是，如果我删除 -webkit-appearance: none; , 一切都显示相同 with和 without输出正在填充的值属性。

这是怎么回事？

Answer 1

使用 Chrome 开发者工具对其进行了测试 - 体验相同。

发生的事情是使用 -webkit-appearance: none 似乎在内部设置了 display: table-cell。

如果您通过设置 display: inline-block 覆盖它(因为它是 without -webkit-appearance: none)它会显示正确。