您的位置：首页 > Web前端 > JavaScript

JS与DOCTYPE冲突导致漂浮代码失效的解决方法

2014-03-17 12:04 656 查看

JS与DOCTYPE冲突导致漂浮代码失效的解决方法

需要添加一个漂浮的图片代码，在单独页面调试的很好，但是发现插入到我们主页里，漂浮代码失效了，这是怎么回事，漂浮好好的插入进去，代码没修过就不能漂浮了，非常郁闷，于是就找是哪里问题，最后通过排除法，总于发现是JS代码与DOCTYPE冲突导致漂浮代码失效，真是罕见啊。

我们可以看到每个标准的网页最顶部都有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这段话。

DOCTYPE是Document
type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本，这是告诉浏览器的一个重要信息，非常有用。但是正是这句话导致我们做的JS漂浮代码不起作用了。

.

这是因为 DOCTYPE与JS代码中的document.body.scrollTop 冲突了，解决的方法有两个，第一个就是把
DOCTYPE那句话去掉，另外一个就是把document.body.scrollTop改成document.documentElement.scrollTop（body相关的属性都要改掉），这是解决漂浮代码失效最根本的方法。我们不建议去掉DOCTYPE那段话，因为一旦去掉会影响到网站其他环节，例如CSS的地方会显示不正常！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航