新的文档类型定义模型带来的问题--javascirpt/CSS

最新推荐文章于 2025-12-27 11:46:02 发布

转载最新推荐文章于 2025-12-27 11:46:02 发布 · 1.1k 阅读

文章标签：

#文档 #html #xhtml #ie #css #google

CSS 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了在IE6浏览器中遇到的document.body.scrollTop始终为0的问题及其解决方案。通过修改DOCTYPE声明和采用兼容性检查的方式，确保了跨浏览器的一致性。

1、document.body.scrollTop一直为0

IE6 and DTD 4.01 requires you to use document.documentElement in stead of document.body, so u will need somthing like the below:

if (document.documentElement && !document.documentElement.scrollTop)
// IE6 +4.01 but no scrolling going on
else if (document.documentElement && document.documentElement.scrollTop)
// IE6 +4.01 and user has scrolled
else if (document.body && document.body.scrollTop)

2、document.body.scrollTop总是零的原因

原来在HTML文件头部声明了这样一句：
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

改成这样就好了：
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN">
但页面稍有变化，感觉不爽，于是又在google里找，终于发现这是IE5与IE6的区别：

var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
   scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
     document.compatMode != 'BackCompat') {
   scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   scrollPos = document.body.scrollTop;
}
alert(scrollPos);

一切OK.

3、关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。

最近，很多人反映下面的CSS定义在 loose.dtd和xhtml1-transitional.dtd下无效了：

body{
SCROLLBAR-FACE-COLOR: #f 2f 2f 2;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #999999;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #ff0000;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

解决办法就是

html,body{
SCROLLBAR-FACE-COLOR: #f 2f 2f 2;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #999999;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #ff0000;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-y:hidden
}

新的文档类型定义模型使用html 元素作为容器。

类似的还有

document.body.scrollHeight等结果为0

需要使用新的办法：

var eleHeight
if(document.documentElement)
eleHeight = document.documentElement.scrollHeight
else
eleHeight = document.body.scrollHeight