zoukankan      html  css  js  c++  java
  • 添加<!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';
  • 相关阅读:
    *HDU2473 并查集
    *HDU3172 并查集
    *cf.4 贪心
    *HDU3635 并查集
    *HDU1325 并查集
    *HDU1829 并查集
    Node.js 学习笔记二
    Node.js 学习笔记 一
    AngularJS 学习笔记 一
    MongoDB 基础知识二
  • 原文地址:https://www.cnblogs.com/gxsyj/p/6023328.html
Copyright © 2011-2022 走看看