随着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>
这是一个浏览器错误还是这种风格不可能?
嘿取代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>