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

最新推荐文章于 2021-06-16 04:02:08 发布

原创最新推荐文章于 2021-06-16 04:02:08 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #文档 #css #html

本文介绍了如何在不同的DTD文档类型中正确地设置CSS滚动条样式，包括body元素的SCROLLBAR-FACE-COLOR等属性，并提供了解决在loose.dtd和xhtml1-transitional.dtd下滚动条样式无效的方法。

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

body{
SCROLLBAR-FACE-COLOR: #f2f2f2;
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: #f2f2f2;
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