1

With the latest update of Chrome to revision 19.0.1084.52 we notice some strange behavior on forms on our website.

When the form has a style with display:inline and position:relative and the input is wrapped in a div that floats then the input is not selectable anymore

Here is the most simple example of the bug (check it in 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>

Is this a browser bug or is this style not possible?

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 回答