让IE5.5+也支持position:fixed;


不支持的

  这个问题是不支持并且不再被支持(意思是我不帮你使它在你的页面当中正常工作)。这个缺陷只有等待Internet Explorer浏览器继承fixed 配置了。现在IE7的偶然来了,尽管在IE6中也可以使用固定功能,那是在将来的WEB当中非常有价值的。对于开发者来说IE6是存在严重问题的(IE 7 也是有问题的, 但是现在忽略这个,6.0至少支持fixed定位)。它被停止,是更好的。

  代替这个,应该鼓励IE6的用户更新到IE7。然而用户不能更新到IE7(因为IE7不是针对所有的浏览器发行的),应该使用更好的浏览器,例如Opera 或者Firefox,他们是不受微软的控制的。

  什么是“position: fixed;”?

  position: fixed; 与 position: absolute; position: relative; and position: static;.相比是不寻常的。

  除了当用户在滚动页面的时候,元素不会跟着滚动以外。“position: fixed;”基本上与“position: absolute;”一样的。严格的说这个元素还是在原来的地方。有许多的页面使用它是为了定位LOGO或者网页菜单。

  “ position: fixed;”出了什么问题?

  好吧,。。。也没什么。这个问题是这个最流行的浏览器 - Internet Explorer for Windows 不能解释它。用原来的定位“position: absolute;”没有什么,同样地,恢复position: static; CSS标准.有相同的效果却根本没有定位。注意IE 7 beta 2版以前的支持 position:fixed; (如果你使用文档类型申明将引发STRICT MODE)所以我将从这个问题上排除IE7。

  因此,一些人使用setInterval 脚本每几毫秒去重新定位一个绝对定位的元素,或者(忽略 Netscape 4)当捕获到onscroll 事件时候这样做。这将产生很傻的抖动效果。如果接受position: fixed;样式的浏览器接受将会是更好的,浏览器也不需要用position: absolute; 和 JavaScript.。一些作者在没有滚动的效果情况下,使用>CSS选择符来隔离IE使元素在浏览器中不采用绝对定位
div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }

  它将产生一个相当漂亮的效果,并且与一个检测当前样式是绝对定位的JAVASCRIPT结合时将会更好,当获到onScroll事件时再重新定位。

  可以改善这种情况吗?

  可以。如果它仅用CSS可以实现的话那将会更简洁,我找到了一个离那个要求更近的方法。

  在IE5的时候,?软就加入了它们的属性Expression到CSS当中,我急于选择这些去进行元素的绝对定位。在浏览器中,Expressions应该是一个根据变化自动更新的,如在滚动页面或者改变窗口的时候。

div#fixme {
 left: expression( document.body.scrollLeft + 'px' );
 top: expression( document.body.scrollTop + 'px' );
}
body > div#fixme { position: fixed; left: 0px; top: 0px; }

  但还是太令人失望的。由于在IE表达式的说明中提到了一个BUG,它将不再更新这个,因此只能停留在(0,0)的坐标。

  不管怎么样,用一些CSS就可以玩弄的,我产生了一些奇怪的念头。如果我分配这个值到变量当中的话,那我就将它指定到Expression的同一行中。在IE5.5和6.0中它已经更新了。虽然有轻微的抖动,但与用脚本来控制定位的技术相比也不算坏。

<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );

  当然,在IE6,按照顺从方式把document.documentElement.scrollTop赋给变量,所以我也需要去检查。IE7在这个问题上也是被排除的
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop

  我们想定位某个元素绝不是(0,0)坐标。

top: expression( ( 10 + ( ignoreMe = document.body.scrollTop ) ) + 'px' );

  当然,不能验证CSS,因此我宁愿在一个条件注释里放一段特别的CSS,这也允许像NETSCAPE4这样较少的浏览器使用正常的left和top定位一样。

<style type="text/css">
#fixme {
     /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
 position: absolute; left: 20px; top: 10px;
}
body > div#fixme {
 /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
 position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
 /* IE5.5+/Win - this is more specific than the IE 5.0 version */
 left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

  我的一个读者发现了一个停止跳动的效果的方式。(更多的情况请点此处),但记着它不是一直都正常 - 如果这个问题被接纳的话这个例子在这个页面上一直是跳动的(另外一个读者发现一个怎样在页面中像这样定位),不管怎么样,你将发现它是可以为你派上用场的
另外的问题如何解决?

  好,也许你想把它放在右下角。理论上,你只需要将左替换为右,上替换为下。你只要将表达式的开头部分的+号改为-号即可。如果那样简单就好了。但并不是那样简单。IE获到的是完全错误的位置,直到你滚动页面,然后重新配置两倍的距离,如果你除以2将每次1个像素,呸!

  因此,它总是需要通过左上来进行定位,无论喜欢与否。但是我们能重新定位它检查它自己的尺寸和窗口的尺寸。移动它到其它的角落。我们可以通过在“标准遵从规范”里的documentElement对象规范的clientHeight的属性解决它自己的大小(多么垃圾!如果IE一开始就遵从规范那样我就就不必要去经历这么多愚蠢的事-离题了),还有在Quirks mode 中的Body对象(详细信息看这个我的Javascript 文档window size部分)。我们可以得到元素本身的大小通过使用fixme.offsetHeight。这是为了更正常的表现的IE的简短方法。

document.getElementById('fixme').offsetHeight

  太感谢了,这个窗口与元素的大小不必任何的戏法去强制它们去更新。但我们一直需要去检查这个standards/quirks模式。

  这个默认安装是使用右下属性的,所以浏览器正好正确的支持。在IE5.5+,这些要重新设置,并且左上的位置替换。记住右下的效法像这样,在表达式中这个补偿必须是负的。

<style type="text/css">
#fixme {
 /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
 position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
 /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
 position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
 /* IE5.5+/Win - this is more specific than the IE 5.0 version */
 right: auto; bottom: auto;
 left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->


  为什么不在Netscape 4的浏览器中用 JavaScript 去解决它呢?

  如果你想去做,仅仅只需要像这样:

if( document.layers ) { setInterval ( 'document.layers.divID.top=window.pageYOffset;', 100 ); }

  你甚至可以在IE4 和 5.0/Win用 document.all. 但老实说, 在Netscape 4浏览器中,我正面临使CSS可以工作的非常讨厌的问?,我知道有许多的问题可以通过它可以解决,但是面临事实吧;NETSCAPE4 不通应对今天的CSS。它虽然很好但它的历史一去不复返了。让它安息吧


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3