In-Field Labels Don't Line Up With Input Text - css

Question

I'm using Viget's In-Field Labels plugin on a form, but even though the label and input have the same font size, same line height, same height, same padding, same everything, the input and label text does not line up. The input text is one pixel lower than the label text.
HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
The plugin sets the label's position to absolute and the top and left properties to 0.
Here's a fiddle.
What am I missing here?

Answer 1

It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;
jsFiddle demo
The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.
Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.

Answer 2

http://jsfiddle.net/d8Apy/12/
Just size your labels & input via line-height. so text-overlap each others since they'll be sitting on same line-height
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
margin: 0;
line-height:16px;
Font-size:16px;
color: #fff;
display: block;border:1px solid transparent
}
input[type='text'] {
border: none;
background: green;
}

Answer 3

I fixed the issue by tweaking one of the CSS rules:
input[type='text'], label {
padding: 5px;
margin: 0;
font-size: 1em;
line-height: 30px;
height: 30px;
color: #fff;
display: block;
}
The trick is to set the container height to be the same as the line-height.
You can see the effect at: http://jsfiddle.net/audetwebdesign/d8Apy/7/
Why this works???
My guess is that browsers compute the height of the anonymous line boxes differently between input and label elements. At least in FireFox, setting the line-height seems to do the trick.
I don't recall ever reading anything in the CSS3 spec related to these details.
Note - Cross-Browser Effects
I tested this in a few browsers and I discovered that if you set both height and line-height and use box-sizing, you get cross-browser issues. However, if you use line-height and box-sizing, the results are consistent. I have not tested with borders.