IE6、7下获得offset值跟其他浏览器不一样问题
语法:
position:static | relative | absolute | fixed
取值:
static :默认值,无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用,默认值。
relative:相对定位,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
absolute:绝对定位,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed:固定定位,对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
四个属性的详细介绍:
说到这里我们不得不提一下一个定义——文档流,很多书对文档流这个概念只是一笔带过,没有详细解答,但我根据自己的经验和理解对它进行了总结,文档流其实就是文档的输出顺序,也就是我们通常看到的由左到右、由上而下的输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文档流脱离出来显示。
默认值就是让元素继续按照文档流显示,不作出任何改变。
当1固定了位置。1的样式 float:left;width:100px; height:800px;
2的样式为 float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px.
absolute,绝对定位
位置被设置为absolute后,被设置的元素会被定义到包含它的元素内的指定坐标(X坐标、Y坐标)。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。它不会随着窗口大小变化,只是固定在一个特定的坐标轴上面;
固定位置,fixed
在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。但是目前它在IE6中不被支持,只有IE7和Firefox浏览器可以识别
position
注意事项:
2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
同时其 offsetTop、offsetLeft 的返回值参照元素也是距离其最近的触发了 hasLayout 的祖先级元素。
IE6、7下获得offset值跟其他浏览器不一样问题的更多相关文章
- js:关于IE6/7下new Date(值)输出为NaN的解决方案
不得不再次说,万恶的IE,你太守旧了吧,这里出错的原因是IE的时间格式,不是2012-01-23(很多人喜欢用这样的格式) 而是2012/01/23(怎么感觉像是在用VB6和access啊) 搞了好久 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- IE6条件下的bug与常见的bug及其解决方法
1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...
- 关于ie6/7下的z-index
z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- c#用牛顿法计算根号下2的值
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
随机推荐
- [工作问题总结]MyEclipse 注册
------------------------------ASP.Net+Android+IO开发 .Net培训 期待与您交流!------------------------------ 1.本人 ...
- AudioManager详解(结合源代码)
AudioManager:用来对音量大小,声音模式(静音,震动,震动加声音等模式)的管理, 还有用它来注册“插入耳机”时的广播接收者(Action: android.intent.action.MED ...
- 检查ORACLE的警告文件的脚本
检查两天内的须要重视的信息: vi alter_error.sh echo "Check Alter Error:" cat $TRACE/alert_$ORACLE_SID. ...
- 那么温暖http合约,入门。
简介 年提出.经过几年的使用与发展,得到不断地完好和扩展.眼下在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,并且HTTP-NG(Next Generation ...
- Java - 泛型 ( Generic )
Java - 泛型 ( Generic ) > 泛型的特点 > 解决元素存储的安全性问题 > 解决获取数据元素时,需要类型强转的问题 ...
- 配置基于NotePad++工具下的C#开发环境
1.打开NotePad++,打开Notepad++的插件(plugins)菜单-->Plugin Manager-->Show Plugin Manager-->勾选NppExec- ...
- css设置
box-size允许您以特定的方式定义匹配某个区域的特定元素. content-box(默认):宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元素的内边距和边框.border-box:为元素设 ...
- session进程和服务
session如果是存在进程内的话,当进程重启,session数据就会丢失. 所以就找到了个办法,不吧session放在进程内,而是放在服务器上.这样子只要服务器不重启,session数据就不会丢失. ...
- slf4j 和 log4j使用案例
以Maven项目为例: 步骤: 1.在Maven的pom.xml文件中添加dependency: 之后就会添加3个jar包: 2.在项目下添加log4j.properties 3.log4j.pro ...
- win7笔记本电脑实现wifi共享
前提条件:win 7系统,有wifi 同dos命令就可实现wifi共享 第一步: netsh wlan start hostednetwork pause 第二步: netsh wlan set ho ...