html - 为什么输入时 中的 <input> 会自行移动

Question

我不知道这里发生了什么:

<div style="position: absolute; width: 70px; height: 100px; left: 60px; top: 30px; overflow:hidden; background-color: rgb(255, 192, 192);">
  <div style="position: absolute; top: 22px; left: 18px;">
    <input type="text" placeholder="type here" style="width: 150px; height: 21px; overflow: hidden;"/>
  </div>
</div>

http://jsfiddle.net/7MX54/1/

在文本框中键入内容，它会更改其位置。不涉及 JS!这是为什么？哪个 CSS 规则可以解决问题？

编辑:感谢您的澄清。我将宽度更改为 100%——足够好了: http://jsfiddle.net/7MX54/2/

Answer 1

实际上，文本框的位置并没有改变；它的容器正在滚动。这是浏览器可访问性问题，而 CSS 无法做到这一点。

例如，当焦点改变到视线之外时，您会在任何 overflow: hidden; 容器中注意到同样的事情。