Meebo栏如何跨浏览器工作得如此之好？

Question

在Meebo的聊天栏是一个小的,不显眼的酒吧(不包括一些可选的弹出一些网站把其内部的-基棒是相当不显眼但)那支视口的底部,并添加到页面上只有少数JavaScript行.具体来说,我感兴趣的是他们如何设法让"视口底部"定位工作得如此好,一致,并且没有闪烁或其他工件跨浏览器.

请注意,即使在IE中,Meebo解决方案也不需要在页面上使用特定的DOCTYPE,因此无论它是什么,它都可以在IE Quirks模式下正常运行.这是关键 - 我要问的是,除了添加标签或插入标签的代码之外,如果无法控制托管页面,如何使视口底部工具栏工作.单独修复CSS不是一个可接受的解决方案,因为它在IE Quirks模式下无法正常工作.

另外,虽然我提到Meebo吧作为一个例子,但我实际上并不是在寻找社交工具栏,所以我不能只使用Meebo.

所需的浏览器支持 - 请注意,Meebo支持所有这些:IE6,IE7 +,Firefox,Safari,Chrome.完全没有显示(但根本没有打破页面)对IE6来说是可以接受的,尽管偏好当然是为了(像Meebo)在IE6中正常工作.像Opera这样的其他浏览器也很不错,但我需要的浏览器列表就在上面.

Answer 1

简单的答案是,对于怪癖模式和IE6,我们利用CSS表达式的强大功能动态地计算元素的位置.正如nwell结果所指出的那样,我们为每个浏览器提供有针对性的CSS文件,因此我们能够在不利用*/_ bug或其他奇怪的浏览器目标黑客的情况下实现此行为.

此外,我们利用IE渲染引擎的一个有趣的行为,其中,如果在HTML或Body元素上设置了背景属性,IE将在重绘之前计算固定元素的位置.这大大减少了您通常在使用基于JavaScript的方法在滚动/调整大小时重新定位元素时看到的闪烁行为.

该网站提供了实施职位解决方案的精彩概述:已在所有主流浏览器中修复:http://www.howtocreate.co.uk/fixedPosition.html

它还引用了闪烁问题的相当巧妙的解决方案:http://www.howtocreate.co.uk/emails/LinusSylven.html

希望这有帮助!