1

Chrome のリビジョン 19.0.1084.52 への最新の更新により、Web サイトのフォームに奇妙な動作が見られます。

フォームに display:inline と position:relative のスタイルがあり、入力が float の div でラップされている場合、入力は選択できなくなります

バグの最も単純な例を次に示します (Chrome で確認してください)。

<form action="" method="get" style="display:inline; position:relative">
  <div>
    <label>test1</label>
    <input id="test1" name="test1" type="text" value="clickable" />
  </div>
  <div style="float: left;">
    <label>test2</label>
    <input id="test2" name="test2" type="text" value="not clickable" />
  </div>
  <div style="clear:both;"><input type="submit" value="submit"></div>
</form>

これはブラウザのバグですか、それともこのスタイルは不可能ですか?

4

1 に答える 1

0

ちょっと置き換えfloat:leftてinline-block

このように

<form action="" method="get" style="display:inline; position:relative">
  <div>
    <label>test1</label>
    <input id="test1" name="test1" type="text" value="clickable" />
  </div>
  <div style="display:inline-block;">
    <label>test2</label>
    <input id="test2" name="test2" type="text" value="not clickable" />
  </div>
  <div style="clear:both;"><input type="submit" value="submit"></div>
</form>

ライブデモhttp://jsfiddle.net/t4a3r/ </p>

于 2012-06-05T09:47:35.600 に答える