3

「mad libs」スタイルのテンプレートを構築しようとしていますが、ラベルにラップされた相対的に配置された入力が Firefox では予期せず表示され、Safari/Chrome では期待どおりに表示されるという問題に遭遇しました。原因を調査してみましたが、この非互換性の原因となっている 2 つのブラウザの違いがわかりません。

ここにフィドルがあるので、私が説明していることをよりよく理解できます。これを修正する方法の手がかりはありますか？HTMLを書き直す必要があるのでしょうか？この HTML は動的にレンダリングされており、可能であればバックエンドを変更する必要がないため、理想的にはこれは単なる CSS の問題です。

そして、ここにフィドルの 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;
}

助けてくれてありがとう！

EDIT：より明確にするために、ラベルはテキスト入力の下に表示されるように、「マッドライブラリ」ラベルとして機能することになっています。大まかに言えば、すべてのブラウザーで適切な場所にありますが、Chrome の場合のほぼ 2 倍の距離で押し下げられているように見え、後続のテキスト行と重なってしまいます。

4

1 に答える 1

2

labelこれは、ブラウザがインライン ブロックのベースラインを決定する方法の不一致に基づいています。この問題を回避するには、default 以外のラベルに vertical-align を使用しますbaseline。たとえば、次のvertical-align:topjsfiddle に従って使用します: http://jsfiddle.net/4GhLA/2/

(ここでの CSS 仕様に関して、Chrome と Firefox のどちらが正しいかを判断するのは非常に困難です。要素display:blockの がinput要素のインライン ブロック内にライン ボックスを確立するかどうかによって異なりますlabel。)

于 2013-05-07T00:16:29.057 に答える