转

现在，最令网页设计者头痛的问题就是网页在各个浏览器中的兼容性。而兼容性差最长见的，也是最令人恐惧的便是“页面布局混乱”。常常一个页面在IE6下显示的非常完美，而到了IE7（或者FireFox）中，则惨的“不堪入目”。到底是什么让这些页面那么的“水土不服”呢？

       其实，这些都是IE6酿下的恶果，IE6对web标准的支持过于不足，甚至理解的有偏差，才导致了这些页面的“脆弱”。而IE7则修正了很多的那种“IE6对css解释和渲染”的bug。这种bug有很多。今天，这里只讲其中一个，但是确是最重要的一个，很多的“十分”混乱的页面都是它造成的。可以不客气地说，它简直就像“页面布局混乱黑帮”的幕后黑手，是引起页面布局混乱的祸首之一，而且是最大的一个。 它就是潜伏在网页背后的“‘overflow:visible’IE6渲染bug”。

原因——IE6对“overflow:visible”的误解

Visible： "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box（注：后面这句可能是后续版本补充上来的）".

       注意，w3c只是说，超出容器的内部不会被剪切。但是它并没有说，超出来的内容可以“撑开”容器。所以下面这个例子中IE7的解释和渲染是正确的，而IE6则是错误的（因为它错误的认为，只有让容器内的内容“撑开”容器，才能让容器内的内容在超出时不被剪切），IE7和FireFox是一样的。

解决方法

       大家知道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中的是无能为力的。