上网找了好久没有找到一个offsetLeft在各浏览器的值，自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值。



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>offsetLeft和offsetTop</title>

	<style>

	*{

		margin: 0px;

		padding: 0px;

	}

	body{

		width: 500px;

		height: 200px;

		padding: 25px;

		margin: 32px;

		border: 51px solid yellow;

		background: pink;

		/* position: absolute; */

		/* 108*/

	}

	#pppd1{

		width: 1000px;

		padding: 1px;

		margin: 3px;

		border: 4px solid yellow;

		position: absolute;

		/* 8 */

	}

	#ppd1{

		width: 1000px;

		padding: 11px;

		margin: 3px;

		border: 4px solid yellow;

		/* 18 */

	}

	#pd1{

		width: 10px;

		height: 100px;

		padding: 1px;

		margin: 3px;

		border: 6px solid yellow;

		background: pink;

		/* 10 */

	}

	#d1{

		width: 100px;

		height: 200px;

		padding: 20px;

		margin: 30px;

		border: 40px solid skyblue;

		background: pink;

	}

</style>

</head>

<body>

	<div id="pppd1">

	<div id="ppd1">

	<div id="pd1">

		<div id="d1"></div>

	</div>

	</div>

	</div>

</body>

</html>

<script>

	var d1 = document.getElementById('d1');

	console.log(d1.offsetLeft);

</script>

<!--

ie 6/7 () 无论父级怎么改变offset永远不变

offsetLeft = (父padding-left)+(当margin-left)

---------------------------------------------------------------------------------

父级没有定位且父级是body时

firefox

offsetLeft = (父padding-left)+(父margin-left)+(当margin-left)

ie8/9/10/11 chrome

offsetLeft = (父padding-left)+(父margin-left)+(父border-left)+(当margin-left)

---------------------------------------------------------------------------------

父级没有定位且父级有多层时

ie8/9/10/11 chrome （所有父，包括body）

offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)

firefox  （所有父，不包括body）

offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)+ (body的padding-left)+(body的margin-left)

--------------------------------------------------------------------------------------

父级有定位且定位不是在body

ie8/9/10/11 chrome 和firefox

向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到定位时,把定位元素的padding-left相加,最后加上自身元素的margin-left

offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)

----------------------------------------------------------------------------------------

父级有定位且定位是了在body

 chrome

向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-left

offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(有定位父border-left)+(当padding-left)

ie8/9/10/11 和firefox  这个和定位不是在body时是一样的

向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-lef

offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)

----------------------------------------------------------------------------------------

1级父级有定位且定位不是body

在chrome和firefox下,ie还没有测试

offsetLeft =(当margin-left);

所以可以用这个属性去写滑动的效果

 -->

offsetLeft在各浏览器的值的更多相关文章

  1. Python爬虫教程-10-UserAgent和常见浏览器UA值

    Python爬虫教程-10-UserAgent和常见浏览器UA值 有时候使用爬虫会被网站封了IP,所以需要去模拟浏览器,隐藏用户身份, UserAgent 包含浏览器信息,用户身份,设备系统信息 Us ...

  2. 用file上传文件时，浏览器返回值总是自动添加<pre>的解决办法

    在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...

  3. S 导入值列表浏览器、值列表

    先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...

  4. IE9或以上的浏览器flash值为空时，导致domready不触发

    在前些时间开发中遇到一个问题当flash值<param name="movie" value=""/>为空时,IE版本>=9不会触发domre ...

  5. 各种浏览器UA值

    UA  User-Agent:用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器引擎.浏览器语言.浏览器插件等. 标准格式为: 浏览器标识 ...

  6. 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)

    三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...

  7. offsetleft、offsetTop、offsetParent的兼容性问题

    先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...

  8. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  9. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

随机推荐

  1. php依据地理坐标获取国家、省份、城市，及周边数据类

    功能:当App获取到用户的地理坐标时,能够依据坐标知道用户当前在那个国家.省份.城市.及周边有什么数据. 原理:基于百度Geocoding API 实现.须要先注冊百度开发人员.然后申请百度AK(密钥 ...

  2. 简单Android代码混淆（转）

    代码混淆步骤: 1,project.properties中打开代码混淆功能,加入proguard.config=proguard.cfg 2,编辑proguard.cfg文件,项目没有自动生成时可手工 ...

  3. Linux环境下使用dosemu写汇编

    本章学习内容是汇编语言,现在直接写汇编的机会不多了,但一定要能读懂,信息安全的核心思维方式“逆向”在这有很好很直接的体现,反汇编就是直接的逆向工程. 所以我在前几天的学习中在Ubuntu环境下安装了可 ...

  4. SQL 数据类型 numeric varchar char

    Numeric(10,2) 指字段是数字型,长度为10 小数为两位的 简要描述一下SQL中的五种数据类型:字符型,文本型,数值型,逻辑型和日期型 字符型 VARCHAR VS CHAR VARCHAR ...

  5. 织梦简洁机械设备dedecms模板

    织梦简洁机械设备dedecms模板,个人网站模板,dedecms模板. 模板地址:http://www.huiyi8.com/sc/7269.html

  6. BZOJ 3398 [Usaco2009 Feb]Bullcow 牡牛和牝牛：dp【前缀和优化】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3398 题意: 约翰要带N(1≤N≤100000)只牛去参加集会里的展示活动,这些牛可以是牡 ...

  7. 0.5px的实现的几种方法

    方法一 通过css3缩放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. HihoCoder1673 : 01间隔矩阵（[Offer收割]编程练习赛41）（单调队列）

    描述 给定一个N × M的01矩阵,小Hi希望从中找到一个01间隔的子矩阵,并且子矩阵的面积越大越好. 例如对于 0101010 1000101 0101010 1010101 0101010 在右侧 ...

  9. 【Lintcode】069.Binary Tree Level Order Traversal

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  10. OGG 进程清除、重建

    背景描述:有时候OGG进程同步出现问题,症状某些进程起不来,而且问题一时半会儿解决不了.最简单的办法是:用数据泵初始化数据,OGG进程重建. 1.查看源端.目的端的进程状态. (作者OGG进程是正常的 ...