网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

【IE6 BUG大全】position:fixed在IE6下的实现

日期:2013-11-30  来源:攀枝花惠康网络公司

Position属性有四个可选值,它们分袂是:staticabsolutefixedrelative。我们下面来配合进修它们的分歧的用法,在进修中我们应该去思虑在什么结构情形下,应该使用它们其中的哪一种。

值 描述 static 默认。位置设置为 static 的元素,它始终会处于页面流给以的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。 relative 位置被设置为 relative 的元素,可将其移至相对于颇正常位置的处所,是以 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。 absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可经由过程 “left”、”top”、”right” 以及”bottom” 属性来划定。 fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可经由过程 “left”、”top”、”right” 以及”bottom” 属性来划定。非论窗口滚动与否,元素城市留在阿谁位置。工作于 IE7(strict 模式)。
<p>这是为了增添高度</p>


position:static 无定位
该属性值是所有元素定位的默认情形,在一般情形下,我们不需要出格的去声明它,但有时辰碰着担任的情形,我们不愿定见到元素所担任的属性影响自己,年夜而可以用position:static打消担任,即还原元素定位的默认值。
如:#nav{position:static;}

position:fixed 相对于窗口的固定定位


请出格注重,IE6及以下不撑持CSS中的position:fixed属性。真的很是遗憾,所以我们只能经由过程JS模拟和CSS Hack等体例来实现。

1.IE前提注释解决方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed2.html

XML/HTML代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<p>End</p>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head> <body>
<title>position:fixed――IE前提注释解决方案</title>
<style type=”text/css”>
<!–
body {margin: 0; padding:0}
p{ height:50px}
.fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; }


<p>这是为了增添高度</p>
</style>
<!–[if IE 6]>
<style type=”text/css”>*/
html{overflow:hidden;}
body{height:100%;overflow:auto;}
<p>这是为了增添高度</p>
.fixed{position:absolute;}
</style>
.fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
<!–[if lt IE 6]>
<style type=”text/css”>
</style>
<![endif]–>
<p>Begin</p>
<p>这是为了增添高度</p> <p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>

其他两种前面提过,我们 首要说的是fixed


<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<![endif]–>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<div class=fixed>position: fixed;我始终在屏幕左上角哦</div>
<p>这是为了增添高度</p> <p>这是为了增添高度</p>
<!–以下是筒捡恸码–> <script type=”text/javascript”>initAccessKey() //转换AccessKey For IE</script><script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=http://www.css88.com/archives/’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
<p>这是为了增添高度</p>
var pageTracker = _gat._getTracker(“UA-3448069-1″);
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

2.CSS hack解决方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed1.html

XML/HTML代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<head>
&lon: fixed; top:0; _position: absolute} </style></head>

<body>
这个定位属性值是什么意思呢?元素的定位体例同absolute近似,但它的包含块是视区自己。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器考察中移动。例如,它许可框架样式结构。在页式媒体如打印输出中,一个固定元素会呈现于第一页的不异位置。这一点可用于生成流动问题或脚注。我们也见过相似的效不美观,但年夜都数效不美观不是经由过程CSS来实现了,而是应用了JS剧本。


<p>Begin</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
</html>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
<p>这是为了增添高度</p>
–>
<p>End</p>
<div class=fixed>position: fixed;我始终在屏幕左上角哦</div>
</body>
<p>这是为了增添高度</p>

可能你要将这个板块定位在右上角或者右下角,以上2种烦死都要将right:17px;为什么不是right:0呢?


<html xmlns=”http://www.w3.org/1999/xhtml“>
<p>这是为了增添高度</p>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

如不美观您自己做过板块定位在右上角、右下角或者右边的某个位置这样的实例就会发现这个问题,其实fixed元素的绝对位置是相对于HTML元素来说,而滚动条是body元素的,这是设置right:17px的原因就是要减去这个滚动条的宽度。

3.JS模拟解决方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed.html

这种体例斗劲繁琐,不做推广了,所以也就不做具体诠释了。

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200