html - 在线表单上的表单输入不可点击

Question

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

当表单具有 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>

这是浏览器错误还是这种样式不可能？

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/