offsetLeft在各浏览器的值
上网找了好久没有找到一个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在各浏览器的值的更多相关文章
- Python爬虫教程-10-UserAgent和常见浏览器UA值
Python爬虫教程-10-UserAgent和常见浏览器UA值 有时候使用爬虫会被网站封了IP,所以需要去模拟浏览器,隐藏用户身份, UserAgent 包含浏览器信息,用户身份,设备系统信息 Us ...
- 用file上传文件时，浏览器返回值总是自动添加<pre>的解决办法
在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...
- S 导入值列表浏览器、值列表
先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...
- IE9或以上的浏览器flash值为空时，导致domready不触发
在前些时间开发中遇到一个问题当flash值<param name="movie" value=""/>为空时,IE版本>=9不会触发domre ...
- 各种浏览器UA值
UA User-Agent:用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器引擎.浏览器语言.浏览器插件等. 标准格式为: 浏览器标识 ...
- 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)
三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
随机推荐
- 我的Java开发学习之旅------>Java String对象作为参数传递的问题解惑
又是一道面试题,来测试你的Java基础是否牢固. 题目:以下代码的运行结果是? public class TestValue { public static void test(String str) ...
- winserver 资源下载
http://msdn.itellyou.cn/ 下载各种系统资源,支持迅雷下载,速度杠杠的
- 利用wrapper注冊的 java服务起动超时的解决方法
使用Java Service Wrapper能够把java程序注冊为一个系统服务,可是在启动服务的某些情况下会抛出例如以下错误: ERROR | wrapper | 2014/06/11 08:4 ...
- 超限学习机 (Extreme Learning Machine, ELM) 学习笔记 (一)
1. ELM 是什么 ELM的个人理解: 单隐层的前馈人工神经网络,特别之处在于训练权值的算法: 在单隐层的前馈神经网络中,输入层到隐藏层的权值根据某种分布随机赋予,当我们有了输入层到隐藏层的权值之后 ...
- appium不支持Android7.0系统设备解决办法
1. 找到appium的安装目录下的adb.js文件. 2. 打开adb.js,手动修改该文件下的内容: Adb.prototype.getPIDsByName=function(name,cb){ ...
- <JAVA8新增内容>关于集合的操作（Collection/Iterator/Stream）
因为下文频繁使用lambda表达式,关于Java中的lambda表达式内容请见: http://www.cnblogs.com/guguli/p/4394676.html 一.使用增强的Iterato ...
- 修改ubuntu14.04命令行启动
方法1: 原来要想默认不进入xwindows,只需编辑文件”/etc/default/grub”, 把 GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash” 改成GRUB ...
- cifs挂载远程文件出现 No such device or address错误
1. 参考 https://www.raspberrypi.org/forums/viewtopic.php?t=82199 找了两天看到这个文章才解决了问题. 我是之前同事在windows上挂载成功 ...
- Css公共文件结构
一般一个网站会有这么三个样式: global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式 ...
- haproxy透传用户ip-方法和原理
为了透传用户ip到后端server, proxy机器需要解决两个问题: 1.在创建到后端server的套接字时, 将用户ip作为套接字的源ip,从而让后端server看到: 2.后端server在回包 ...