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

最新推荐文章于 2020-11-28 14:49:30 发布
最新推荐文章于 2020-11-28 14:49:30 发布
阅读量118 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/sdp-dream/archive/2012/09/25/2701175.html
版权

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的地方会显示不正常！

 

 

转载于:https://www.cnblogs.com/sdp-dream/archive/2012/09/25/2701175.html

ditkl031858
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
加了 DOCTYPE 以后js飘动效果失效解决办法
anzheng6118的博客
05-28 117
首先是网上的一段代码，注意下面的代码是没有DOCTYPE申明的，不过运行正常，但是加了DOCTYPE以后，代码失效。 1 <html> 2 <head> 3 <title>漂浮广告</title> 4 <body> 5 <div id="codefans_net" style="positio...
!doctype html public 广告飘窗不能用了,页面广告飘窗
weixin_36191781的博客
07-03 154
HTML结构如下js逻辑也非常简单，就是移动left和top的值，代码如下!function($dom){var winWidth = window.innerWidth;var winHeight = window.innerHeight;window.onresize = function(){winWidth = window.innerWidth;winHeight = window.in...
【坑】在HTML页面中缺少<!doctype html>造成部分js代码失效问题
热门推荐
Slience
08-21 1万+
无标题文档 function sayhello() { alert("hello shushu"); } function resizeRock() { document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9+'px'; } 如果
js放到head中失效的原因与解决方法
01-19
1.今天写js碰到一个奇怪的问题，写好的js放到body里面执行，但是放到head中没有任何效果，为什么导致这种原因呢？ 看失效代码： <!DOCTYPE ...
选择正确DOCTYPE解决CSS在网页失效问题
09-27
网页制作Webjx文章简介：如果你的CSS都是正确的，链接也没有出错的话，为什么偏偏CSS样式不生效呢？你也许正在为这个事而焦头烂额，呵呵，不要气馁，我以前也被这个事弄得头大过。这时你需要检查你的网页最头部是否...
jquery.messager.js插件导致页面抖动的解决方法
12-08
消息弹出时页面总是抖动或者闪一下，找了很长时间没有找到...需要加上<!DOCTYPE> 标签 代码如下:PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
基于JavaScript代码实现随机漂浮图片广告
10-23
在网上有很多这样的代码，不过未必符合W3C标准，因为在头部加上<!DOCTYPE html>类似标签之后，漂浮效果就会失效，下面分享一个符合标准的漂浮代码，使需要的朋友免去大量改造代码的繁琐
动态创建script在IE中缓存js文件时导致编码的解决方法
12-12
先看下重现代码 1， gb2312.html 该文件编码为gb2312 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset=”gb2312″/> <style> p { color: red; } &...
漂浮HTML代码 单页代码
07-22
漂浮HTML代码 单页代码
html+css
ljy2198473308的博客
11-06 385
无标题文档 //样式 .big{ width:1200px; height:600px; padding:10px; float:left; } .top{ width:1400px; height:210px; background:#999;} h1{ color:#F00; margin-left:100px; padding-top:30px;} h
添加<!doctype html>后造成JS写的定位失效
weixin_34378969的博客
11-02 250
今天同事找了一个悬浮广告的插件，但是一放入页面中就失效了，也没有报错，后来通过原文件对比，发现是加了<!doctype html>。 这样子定位并不起效果： document.getElementById("rockImg").style.left=document.getElementById("rockImg").offsetTop; 后来在网上找了一下发现是声明文档...
由DOCTYPE造成的Javascript运行错误问题之解决方法
小李专栏
09-15 1万+
每个标准的网页最顶部都有这段话，但是有时它会造成你的Javascript脚本不执行，怎么解决呢？
cass坐标标注插件_CASS软件常见问题汇总（下）
weixin_39986178的博客
11-28 2032
- 11 -“粘贴到原坐标”菜单命令变灰，无法执行。答：点击菜单“绘图处理-改变当前图形比例尺”，直接回车后，此菜单可恢复。- 12 -如何启动软件CASS软件锁的服务？答：启动深思数盾用户管理工具，按下图设置- 13 -CASS加载的大影像数据，支持哪些格式？答：支持tiff，jpg，img影像格式. 现在只支持8位的深度。- 14 -加载菜单提示无写入权限，怎么处理？...
圣诞doctype原代码
最新发布
07-31
圣诞doctype原代码可以是以下示例： <!DOCTYPE html> 圣诞节网页 圣诞快乐！ 在这个特别的节日里，我们祝福大家都能收获幸福和快乐。 圣诞树"> 圣诞老人 礼物 烟囱 希望大家度过一个愉快的圣诞节...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值