0

如果在文本框内单击,按住鼠标按钮并开始上下拖动,文本框将在容器内移动。问题仅在 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>
4

1 回答 1

1

您需要删除.inputOverGate该类的高度声明。我已经更新了你的小提琴演示:http: //jsfiddle.net/V66ts/1/

于 2012-06-24T14:48:20.813 回答