Question

随着Chrome的最新更新版本为19.0.1084.52，我们在网站上的表单上发现了一些奇怪的行为。

当表单具有带显示的样式时：inline和position：relative并且输入被包装在浮动的div中，输入不再可选

以下是该错误的最简单示例（在Chrome中检查）

<!DOCTYPE HTML>
 <html>
<head>
<title>Testcase input not selectable</title>

</head>
<body>

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

</body>
</html>

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

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/

表单输入无法在内联表单中单击

1 个答案: