自动高度的TextBox

正确的方法

 

overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

scroll属性对比演示：
代码:
<div style="height:100px;width:100px;overflow-y:scroll;">
test
</div>

<div style="height:100px;width:100px;overflow-y:scroll;">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>


auto属性对比演示：
代码:
<div style="height:100px;width:100px;overflow-y:auto;">
test
</div>

<div style="height:100px;width:100px;overflow-y:auto;">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>


应用：

没有水平滚动条
style="overflow-x:hidden"

没有垂直滚动条
style="overflow-y:hidden"

没有滚动条
style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden"

 

但是IE6总是无法正常显示

大家知道IE有两种渲染模式：Quirks Mode和Strict Mode。Quirks Mode基本上是非标准的，包括盒模型在内，它的渲染方式与W3C的标准有些出入。而Strick Mode基本上是标准的（反正都不是绝对标准也不是绝对不标准……）。IE6及以前版本会根据写在XHTML文档第一行（也只能是第一行）的DocType声明来选择渲染模式。如果发现了一个它能识别的DocType，比如XHTML Transitional或者XHTML Strict等等，它就使用Strict Mode来渲染。其他所有情况下都使用Quirks Mode。

      有些开发者为了显式地声明他们的XHTML文档是一个XML，会在文档的第一行（问题就在这里，它也必须在第一行）加上XML的序言（prolog）。比如：

                             <?xml version="1.0" encoding="gb2312"?>

    　虽然初衷是为了让文档更“标准”，但由于IE不认这行字，结果还是按Quirks Mode来渲染。

      IE7 解决这个问题，它会跳过prolog来看检查DocType。所以可能会出现IE6及以下版本用Quirks Mode渲染而IE7 用Strict Mode渲染的情况。

       现在让IE7渲染textbox的模式是Quirks Mode，这样textbox的overflow:visible属性就可以像IE6效果一样了，所以只要把XHTML文档第一行的DocType声明删除就可以了。

       这样问题就解决了。。。

      注意：虽然在IE7和IE6中显示一样的，但是在FF中还是不一样，所以这种方法只能解决IE7中的问题，FF中的是无能为力的。