incorrect height in Chrome when "-webkit-appearance: none" and value="" on <input> tag
- by Avi Steiner
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?
