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

问题描述 投票:1回答:1

随着Chrome的最新更新版本为19.0.1084.52,我们注意到我们网站上的表格有一些奇怪的行为。

当表单具有带显示的样式时:内联和位置:相对,输入包含在浮动的div中,然后输入不再可选

这是最简单的bug示例(在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>

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

html css forms google-chrome webkit
1个回答
0
投票

嘿取代float:leftinline-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/

© www.soinside.com 2019 - 2024. All rights reserved.