如果您在文本框内单击，按住鼠标按钮并开始上下拖动，文本框将在容器内移动。问题仅在 WebKit 中。
重要的是不要更改 overflow hidden 的绝对容器内的输入结构
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.inputOverGateContainer
{
top:0px;
width: 100px;
height: 22px;
background-color: transparent;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
z-index: 5;
padding-left:3px;
padding-right:3px;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.inputOverGate
{
font-size:17px;
background-color: #fff;
border: 1px solid #000;
outline: none;
width: 100%;
height: 100%;
color:#8292b4;
text-shadow: 1px 1px 3px #000;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
</style>
</head>
<body>
<div class="inputOverGateContainer"><input class="inputOverGate" name="" type="text"></div>
</body>
</html>
最佳答案
您需要删除 .inputOverGate 类的高度声明。我已经更新了你的 fiddle 演示:http://jsfiddle.net/V66ts/1/
关于html - 如何阻止文本框在 WebKit 的容器内移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11178370/