现场标签不与输入文本对齐

Question

我在表单上使用Viget's In-Field Labels plugin，但即使标签和输入具有相同的字体大小、相同的行高、相同的高度、相同的填充、相同的所有内容，输入和标签文本不对齐。输入文本比标签文本低一个像素。

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;
}

插件将标签的position 设置为absolute，并将top 和left 属性设置为0。

Here's a fiddle.

我在这里错过了什么？

Answer 1

我通过调整 CSS 规则之一解决了这个问题：

input[type='text'], label {
    padding: 5px;
    margin: 0;
    font-size: 1em;
    line-height: 30px;
    height: 30px;
    color: #fff;
    display: block;
}

诀窍是将容器高度设置为与行高相同。

你可以在http://jsfiddle.net/audetwebdesign/d8Apy/7/看到效果

为什么会这样？？？

我的猜测是浏览器在输入和标签元素之间以不同的方式计算匿名行框的高度。至少在 FireFox 中，设置 line-height 似乎可以解决问题。

我不记得曾经阅读过与这些细节相关的 CSS3 规范中的任何内容。

注意 - 跨浏览器效果

我在几个浏览器中对此进行了测试，发现如果同时设置高度和行高并使用框大小，则会出现跨浏览器问题。但是，如果使用 line-height 和 box-sizing，结果是一致的。我没有测试过边框。

Answer 2

http://jsfiddle.net/d8Apy/12/ 只需调整标签大小并通过行高输入。因此文本相互重叠，因为它们将位于相同的行高

* {
    -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

使用几乎 100% 的 CSS 可以做到这一点，并避免由 position: absolute; 引起的所有布局流程问题

jsFiddle demo

诀窍是将LABEL 包裹在文本和INPUT 元素周围。将文本放在可以给出display: inline-block; margin-right: -100%; 的元素中。这会将文本直接放在INPUT 下方，并为其提供透明背景，因此可以通过INPUT 看到文本。

当字段有用户输入时，需要一些 Javascript 才能使 INPUT 背景不透明。目前没有办法解决这个问题……CSS 无法“检测”非空的 INPUT 元素。