我正在尝试构建一个“疯狂的libs”样式模板,但是我遇到了一个问题,其中包含在标签中的相对定位的输入在Firefox中意外显示,但在Safari / Chrome中显示为预期。我曾尝试研究可能导致这种情况的原因,但我似乎无法弄清楚这两种浏览器之间的区别是导致这种不兼容性。
这是一个fiddle,因此您可以更好地理解我所描述的内容。有关如何纠正此问题的任何线索?也许我需要重写我的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中的两倍,这导致它们与后续文本行重叠。
答案 0 :(得分:2)
这是基于浏览器如何确定label
内联块基线的位置之间的差异。要避免此问题,请对默认baseline
以外的标签使用vertical-align。例如,根据此jsfiddle使用vertical-align:top
:http://jsfiddle.net/4GhLA/2/
(很难判断Chrome或Firefox在CSS规范方面是否正确。这取决于display:block
元素的input
是否在内联块内部建立了一个行框是否label
元素。)