为什么html输入中的backspace / del事件会破坏我的html？

Question

我正在做一个Phonegap应用程序，当我在文本输入中执行退格键或删除按键时，我遇到了这个奇怪的问题。文本输入占用100％的宽度，如果我的字符串比移动屏幕长，并且输入中有退格/ del，它会破坏我的html布局，它会将我的标题输入到输入元素的左上角位置。以下是2张正在发生的事情的图片。如果我的字符串很小，则backspace / del不会破坏我的html。

这是我输入的css和html：

.dentry {color: #000000;font-size: 2.6em}

#dentry-wrap {width:100%; height:80px; margin:0 0 7px 0;}
.inputareafull {
    width:100%; height:80px; float:left; font-size:2.6em;
    border-top-left-radius:3px; -moz-border-radius-topleft:3px; border-bottom-left-radius:3px; -moz-border-radius-bottomleft:3px;
    border-top:1px solid #c4c4c4; border-bottom:1px solid #fff;
    background-color: #f7f7f7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(247, 247, 247)), to(rgb(222, 225, 225)));
    background-image: -webkit-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
    background-image: -moz-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
    background-image: -o-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
    background-image: -ms-linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
    background-image: linear-gradient(top, rgb(247, 247, 247), rgb(222, 225, 225));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f7f7f7', EndColorStr='#dee1e1');
}
.inputareafull input {width:98%; height:100%; text-align: left; background:none; border:none;}

<div id="dentry-wrap">
    <div class="inputareafull">
        <input class="dentry"></input>
    </div>
</div>

我没有做CSS的东西而且我不是100％可能导致这种情况。

感谢任何帮助！

Answer 1

它是由我的容器围绕dentry-wrap div引起的，我删除它并在inputareafull div上正确设置我的边距，现在它可以工作。