我正在尝试构建一个“Mad Libs”样式的模板，但我遇到了一个问题，相对定位的输入包裹在标签中，在Firefox中显示出现意外情况，在Safari/Chrome中则表现如预期。我已经尝试研究可能导致此问题的原因，但似乎无法找到两个浏览器之间不兼容的差异。
这是一个演示，让您更好地理解我的描述。您有没有任何线索可以纠正这个问题？也许我需要重写HTML？理想情况下，这只是CSS问题，因为这个HTML是动态渲染的，如果可能的话，我宁愿不改变后端。
以下是来自演示的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;
}
提前感谢您的任何帮助！
编辑：更明确地说，标签应该充当“疯狂的图书馆”标签，以便它们出现在文本输入框下方。在所有浏览器中，它们大致位于正确的位置，但是在Chrome中它们似乎向下推了几乎两倍的距离，导致它们与随后的文本行重叠。
outline: none;- Mi-Creativity