别忘了文档类型声明

以前在做网页的表格数据展示的时候,我曾经也想做一个固定Header,滚动内容的Table,但是用css的方法没有成功,而脚本的方法太麻烦,就没有用。前几天看到一个网页,也就是用固定Header滚动Body的Table,它是纯粹采用css实现的。难得的不是只用css实现了这种效果,而是它让多种浏览器能够兼容,它支持IE6/5.x、Opera7.x、Mozilla1.x、Konqueror 3.x等。他的地址是:http://www.imaputz.com/cssStuff/bigFourVersion.html
增强版本是:http://www.imaputz.com/cssStuff/bulletVersion.html

我打算按照他的方法在我现在的工作中应用。因为写的是ASP程序,所以用InterDev,先是创建了一个html文档,然后按照网页中的方法创建了table和css,但是发现它失败了,header照样滚动,我以为我的css漏掉了些东西,就把它全部copy到我的网页中,但是还是不成功。
执行原来的网页css能够让table成功滚动,而我的网页就是不行,检查了半天没有发现什么问题,后来突然看到源文件头有一行文档类型声明:

我想我找到原因了,于是直接把这行DOCTYPE的声明复制到我的网页中,用IE6打开浏览,成功了。
这行文档类型声明要求浏览器将网页文档准循严格标准的XHTML1.0进行分析,我最初创建的网页没有文档类型声明,所以IE浏览器采用兼容模式分析文档,这时有些css定义是无效或者不完全的。兼容模式中position: relative这个css声明无效。使table header固定的css定义正是这个声明。
我尝试了HTML4.01过渡标准的文档声明:

它也能够成功的运行,这是几乎是最宽松的标准html文档类型声明。Dreamweaver2004创建新网页默认就是按照这个标准定义来声明的。InterDev创建的新网页是没有文档类型声明的,在IE浏览器中,没有声明的则采用向下兼容的Quirk标准分析网页,我建议在创建网页的时候都加上一个HTML4.01过渡标准或者XHTML1.0过渡标准的文档类型声明,首先这使识别DOCTYPE声明的浏览器分析你的网页的时候,能够按照标准创建界面效果,而不是按照非标准的、兼容的方式来分析网页,而这也不会影响低版本的浏览器对网页的分析。其次如果你不是很熟悉严格的XHTML标准,网页中产生了某些非标准代码,浏览器将无法兼容(比如你无法使用中的target属性)。

后来同事发现扩展版本如果没有声明也能够执行,那是因为这个版本它增加了一个IE5.x之后独有的css属性
top: expression(document.getElementById("tableContainer").scrollTop)
expression能够动态的返回css属性的值,所以IE6浏览器不按照标准模式分析网页也能够成功。

你可能感兴趣的:(Usable,WEB,Web,Standard)