关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG
近期在给公司制作基金项目的页面时，使用了XHTML 1.0的框架结构。起初没有发觉什么，因为在制作之时，使用Opera的时间最多。但是在临近交工时，发现很多页面在IE下经常会莫明其妙的横向滚动条，在Opera或FireFox下却十分正常。检查了CSS和页面却没有发现什么错误，这让人十分恼火和郁闷。在多次尝试之后，终于发现了原因：只有在页面较长需要出现垂直滚动条的时候才会出现这个问题，IE对于出现的垂直滚动条，采取的措施是直接塞到页面中，而原有页面原封不动，这样就造成了横向页面变宽了，横向滚动条也便随之出现。反观Opera和FireFox，它们十分聪明地将原有页面按照减去了垂直滚动条占据的宽度之后按照比例缩短，避免了这个问题。
在又一次咒骂IE的同时，必须要做的还是无奈地寻找规避这个bug的方法。国内关于这个bug的内容很少。但是在国外，让人感到IE再次让许多人和我一样地郁闷。一共有两篇文章比较不错，翻译一下，供自己以后参考.一篇为“IE弹出窗口或框架结构XHTML中多余的横向滚动条BUG”，另一篇为“IE displays unnecessary horizontal scroll bar in frameset”。
后者对这个问题的解决方法是在XHTML 1.0 transitional doctype声明之前加上下面这个声明：
<?xml version="1.0" encoding="utf-8"?>作者认为这样可以保持XHTML的声明及结构，又可以解决IE的这个bug，在文章里也列出了几个使用这种方法的网站。
然而事实并非如此。其实“IE displays unnecessary horizontal scroll bar in frameset”文章的作者使用的是XML prolog。W3C推荐在所有XML及XHTML文档的DOCTYPE声明之前加上XML prolog。但是，很多浏览器，即使是来自W3C的浏览器都不能很好的处理XML prolog，这一点在IE身上表露无遗。我尝试过这种方法，最终结果是，IE竟然无法正确地处理DOCTYPE声明了，转而使用Quirk模式解释当前XHTML文档，这真的是得不偿失。相反地，Firefox 1.5和Opera 9看起来好像可以很好地处理了，但是，讽刺的是，我们需要解决的问题并未在Firefox和Opera身上出现。这样一来，加XML prolog方法变得毫无意义。
第一篇文章中提供了几种解决方案，同这篇文章的作者一样，我也倾向于使用文中所述的第一种方案——强制显示垂直滚动条。这种方案虽然看起来有些笨，并且不是那么美观，但是相比其它繁琐并且冒着可能引起其它bug的风险，我还是保守一些吧。
最后，还不得不提起一下IE的DOCTYPE声明的另一bug：在DOCTYPE声明之前千万不要有任何内容，包括注释、输出的语句等等（对于Firefox和Opera来讲无害）。对于纯静态的XHTML来讲，就是DOCTYPE声明之前不要有任何内容；对于脚本语言PHP、ASP之类的等等，检测的原则就是解释后的代码中，DOCTYPE声明之前不能有任何内容，当然空行还是允许的，但是为了避免其它IE抽风式的毛病，最好也是去掉吧。如果不遵守这样一个原则的话，等待着我们的结果就是：IE又开始使用Quirk模式了！这是我血的教训啊！
参考文章：Designing With Web Standards by Jeffrey Zeldman，其第六章第一小节中的内容再一次使我受益匪浅。
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.