鼠标位置,元素尺寸、偏移量,滚动条偏移量兼容性研究
发布在前端学习一点一滴2014年1月24日view:3648
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

括号内是测试浏览器版本,0表示测出的数据只有0(小弟不才不知道何时能非0),实际上在某些复杂布局里会有更意外的情况,暂时无力研究 enter image description here

offsetParent:

  1. position为fixed元素是没有offsetParent,但firefox统一返回body。
  2. position为absolute, relative的元素的offsetParent总是body。
  3. position为static的元素的offsetParent则是先找最近的非static定位父元素,没有再找td,th,table元素,再没有找body,body为最顶层的offsetParent。
  4. IE7-是触发了hasLayout的最近的父元素作为offsetParent
  5. span strong i a b em 这几个行内元素 scrollWidth/scrollHeight、scrollLeft/scrollTop、clientLeft/clientTop、clientWidth/clientHeight都是0 (scrollWidth/scrollHeight在FF 和 IE 能显示正确数值) 但给他们加上 display:block;的时候,就能显示正常的值了。另外img、input、textearea和select是正常的。他们都是行内元素。 其他行内元素未测。

发现贴整个测试代码格式很难控制,于是想想还是贴到github吧,然后把链接贴上就行:https://github.com/yangkui/studyFrontEndStepByStep/blob/master/testOffset.html

我知道这里还有好多复杂情况没有搞定,欢迎各位同学指正或补充

评论
发表评论
暂无评论
WRITTEN BY
风乐yue
混沌路上,2014!全面起飞!
TA的新浪微博
PUBLISHED IN
前端学习一点一滴

本专栏是记录自己前端学习的一个研究笔记,以及漫无边际的随想。基本上这里的文章我会同步到github一份。欢迎大家交流学习!

友情链接 大搜车前端团队博客
我的收藏