5

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

<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/

4

5 回答 5

9

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

overflow: hidden;例如，当焦点变为看不见的东西时，您会在任何容器中注意到相同的东西。

于 2013-09-27T13:50:13.313 回答
6

如果您有一大列文本框并且您在它们之间切换，最终页面将“神奇地”向下滚动，以便您输入的文本框在视图中。这完全一样。浏览器将确保您可以看到您正在输入的位置。

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

于 2013-09-27T13:50:58.930 回答
0

感谢您的澄清。我将宽度更改为 100% - 足够好：

<input type="text" placeholder="type here" style="width: 100%; height: 21px;"/>

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

于 2013-09-27T14:05:39.040 回答
0

如果增加第一个 div 的宽度，那么您将能够看到输入。例如：width: 270px;

于 2013-09-27T14:02:24.563 回答
0

问题是，您的输入是它的父级比您的包装器 div 宽。使外部 div 的宽度最小为 170px，您的问题就消失了。

或者使输入的宽度足够小以适合包装器。

于 2013-09-27T13:53:29.707 回答