Meebo chat bar是一个很小的,不引人注意的栏(不包括一些放置在其中的某些站点的可选弹出窗口-尽管基本栏不引人注目),它粘在视口的底部,仅添加了几个行的JavaScript。具体来说,我对他们如何使“视口底部”定位如此良好,始终如一,且无闪烁或其他跨浏览器伪影感兴趣。
请注意,即使在IE中,Meebo解决方案也不需要页面上的特定DOCTYPE,因此无论他们做什么,它都可以在IE Quirks模式下正常运行。这是关键-我要问的是,除了添加标签或插入标签的代码外,即使不控制宿主页面,如何也可以使视口底部工具栏工作。单独使用CSS Fixed是不能接受的解决方案,因为它在IE Quirks模式下无法正常工作。
另外,虽然我以Meebo栏为例,但实际上我并不是在寻找社交工具栏,因此我不能只使用Meebo。
必需的浏览器支持-请注意,Meebo支持所有以下各项:IE6,IE7 +,Firefox,Safari,Chrome。 IE6可以完全不显示(但不要完全打乱页面),尽管当然首选(例如Meebo)在IE6中可以正常工作。其他浏览器(例如Opera)将是最好的选择,但是我所需的浏览器列表在上面。
最佳答案
简单的答案是,对于怪癖模式和IE6,我们利用CSS表达式的功能来动态计算元素的位置。正如nwellcome所指出的,我们为每个浏览器提供目标CSS文件,因此我们能够实现此行为而无需利用* / _错误或其他针对目标浏览器的奇怪方法。
此外,我们利用IE渲染引擎的有趣行为,如果在HTML或Body元素上设置了背景属性,则IE将在重绘之前计算固定元素的位置。通过使用基于JavaScript的在滚动/调整大小上重新定位元素的方法,通常可以大大减少闪烁的行为。
该站点对实现位置的解决方案进行了很好的概述:已在所有主要浏览器上修复:http://www.howtocreate.co.uk/fixedPosition.html
它还引用了关于闪烁问题的相当巧妙的解决方案:http://www.howtocreate.co.uk/emails/LinusSylven.html
希望这对您有所帮助!