天天饱

如果你只做自己能力范围之内的事情,就永远没法进步

添加<!doctype html>后造成JS写的定位失效

今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>。

这样子定位并不起效果:

document.getElementById("rockImg").style.left=document.getElementById("rockImg").offsetTop;

后来在网上找了一下发现是声明文档的解析类型(document.compatMode)的原因:

document.compatMode:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

当没有<!doctype html>时浏览器会使用BackCompat,在这个模式下问题较多,文档声明也不严格,像上述代码出来的值加不加代码都不要紧,均可运行。

但是加了<!doctype html>后浏览器就会使用CSS1Compat,在这个模式下浏览器会使用W3C标准来渲染页面,这样要求也会比较严格,像上述代码得出来的值只是数字,所以必须要添加单位才可以运行。

修改为:

document.getElementById("rockImg").style.left=document.getElementById("rockImg").offsetTop+'px';

 

posted @ 2016-11-02 16:17  天天饱  阅读(2881)  评论(0编辑  收藏  举报