html - 标签/输入在 Firefox 中的定位不同于 Chrome/Safari

Question

我正在尝试构建一个“mad libs”样式模板，但我遇到了一个问题，即包装在标签中的相对定位的输入在 Firefox 中意外显示，但在 Safari/Chrome 中却按预期显示。我已经尝试研究可能导致这种情况的原因，但我似乎无法弄清楚导致这种不兼容的两种浏览器之间的区别。

这是一个fiddle这样你就可以更好地理解我所描述的内容。有关如何纠正此问题的任何线索？也许我需要重写我的 HTML？理想情况下，这只是一个 CSS 问题，因为此 HTML 是动态呈现的，如果可能，我宁愿不必更改后端。

这是来自 Fiddle 的 HTML/CSS:

HTML

<div class="feature" id="madlib">
  <h1>Test Test</h1>
  <div class="padded rounded border">
    <p>Dear <label>mom <input name="madlib_mom" type="text" /></label>,</p>  
    <p>Lorem ipsum <label>adjective <input name="madlib_adjective" type="text" /></label>   lorem ipsum lorem ipsum lorem ipsum <label>thank you <input name="madlib_thank_you" type="text" /></label> lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    <p>Lorem ipsum lorem ipsum <label>noun 1 <input name="madlib_noun_1" type="text"
    </label> and <label>noun 2 <input name="madlib_noun_2" type="text" /></label> lorem ipsum lorem ipsummmm lorem, lorem ipsum lorem ipsum lorem ipsum <label>place <input name="madlib_place" type="text" /></label>, lorem ipsum <label>favorite food <input name="madlib_favorite_food" type="text" /></label> lorem ipsum lorem <label>good advice <input name="madlib_good_advice" type="text" /></label>.</p>
  </div>
</div>

CSS

input[type="text"] {
  display:block;  
  position:relative;  
  top:-30px;  
  border-bottom:1px solid pink;
  border-left:0;
  border-right:0;
  border-top:0;
}

label {
  display: inline-block;  
  position:relative;
  top:30px;
  margin-bottom:8px;
  padding:2px;
  text-align: center; 
  font-size:10px;
}

在此先感谢您的帮助!

编辑:更明确地说，标签应该充当“mad libs”标签，这样它们就会出现在文本输入下方。它们大致在所有浏览器中都位于正确的位置，但似乎被向下推的距离几乎是它们在 Chrome 中的两倍，这导致它们与后续文本行重叠。

Answer 1

这是基于浏览器如何决定 label 内联 block 的基线位置之间的差异。为避免此问题，请对默认 baseline 以外的标签使用垂直对齐。例如，按照这个 jsfiddle 使用 vertical-align:top:http://jsfiddle.net/4GhLA/2/

(关于此处的 CSS 规范，很难判断 Chrome 还是 Firefox 是否正确。这取决于 input 元素的 display:block 是否建立是否在 label 元素的内联 block 内的行框。)