如果在文本框内单击,请按住鼠标按钮并开始上下拖动,文本框将在容器内移动。问题仅在WebKit中。

重要的是不要更改隐藏了溢出的绝对容器内部的输入结构

http://jsfiddle.net/V66ts/

<!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类的高度声明。我已经更新了您的小提琴,演示了:http://jsfiddle.net/V66ts/1/

09-25 21:07