为什么在输入时,溢出<div>内的<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;例如,当焦点变为视图外的某些容器时,您会注意到任何容器中的相同内容.

Answer 2

如果您有一大堆文本框并且您通过它们进行选项卡,最终页面将"神奇地"向下滚动,以便您输入的文本框在视图中.这是完全一样的.浏览器将确保您可以看到您键入的位置.

overflow:hidden不禁止滚动,它只是禁用滚动条.滚动位置仍然可以通过JavaScript或文本框更改,如此处所示.