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的高度，标签移动到底部，输入保持在顶部。

但是，如果我删除-webkit-appearance: none;，则所有内容都会显示与正在填充的值属性相同的with和without。

发生了什么事？

Answer 1

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

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

如果您通过设置display: inline-block（因为它是没有 -webkit-appearance: none）来覆盖它，则会正确显示。

Answer 2

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

删除class属性，它可以正常工作，在其容器中为输入字段编写css代码，因为它已在样式表中定义，并且与使用另一个类tblCell冲突

Chrome中的“-webkit-appearance：none”和<input />标记上的值=“”时Chrome中的高度不正确

2 个答案: