In Chrome v17.0.963.79 on Windows 7, I seem to be having an inexplicable problem when applying the -webkit-appearance: none style to an <input> tag. The problem is as follows:

I have a stylesheet, let's call it potatofoot.css, which consists of the code

.tbl {
    display: table;
}

.tblRow {
    display: table-row;
}

.tblCell {
    display: table-cell;
}

input {
    -webkit-appearance: none;
}?

and I have an html file, let's call it blech.html, which contains the code

<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 displays fine (see this jsfiddle). But when I empty the value attribute, as in this jsfiddle, the entire table grows from a height of 26px to a height of 31px, the label moves to the bottom, and the input stays at the top.

However, if I remove -webkit-appearance: none;, everything shows up the same with and without out the value attribute being filled.

What's going on?