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

Question

Meebo chat bar是一个小而不引人注目的栏（不包括一些网站放在其中的一些可选弹出窗口 - 虽然基础栏非常不引人注目），它粘在视口的底部并被添加到只有几行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

希望这有帮助！

Answer 2

查看该页面我发现他们的默认解决方案是使用固定位置，但是他们通过构造相关信息片段中的那些资源的URL来为每个特定的浏览器加载一堆CSS和javascript（浏览器，版本）等等）并将它们作为样式和脚本元素写入/追加到head元素中。

当我把IE7放在quirksmode中时，我看到他们不断用javascript重新定位div，并且在我的机器上至少重绘的闪烁是可怕的，但这可能是最好的一个可以做到并且是微创的页面的其余部分。另一个quirksmode位置固定解决方法涉及将元素设置为相对于视口绝对定位，这会混淆页面上其他所有内容的绝对定位。