内联表单上的表单输入不可点击

Question

随着 Chrome 的最新更新到修订版 19.0.1084.52，我们注意到我们网站上的表单出现了一些奇怪的行为。

当表单具有带有 display:inline 和 position:relative 的样式并且输入被换行时 在浮动的 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>

这是浏览器的错误还是这种风格不可能？

Answer 1

嘿，将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/ ​