javascript - Meebo 栏如何跨浏览器工作得如此出色？

Question

Meebo chat bar是一个小的、不显眼的栏(不包括一些网站放置在其中的一些可选弹出窗口——尽管基本栏非常不显眼)它贴在视口(viewport)的底部，只用几行 JavaScript 就被添加到页面中。具体来说，我感兴趣的是他们如何设法让“视口(viewport)底部”定位工作得如此出色、始终如一，并且没有闪烁或其他跨浏览器的伪影。

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

此外，虽然我提到 Meebo 栏作为示例，但我实际上并不是在寻找社交工具栏，所以我不能只使用 Meebo。

必需的浏览器支持 - 请注意，Meebo 支持所有这些:IE6、IE7+、Firefox、Safari、Chrome。根本不显示(但根本不破坏页面)对于 IE6 来说是可以接受的，尽管首选当然是让它(像 Meebo)在 IE6 中正常工作。其他浏览器(如 Opera)会很不错，但我的必需浏览器列表在上面。

Answer 1

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

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

该站点提供了在所有主要浏览器中实现 position:fixed 解决方案的重要概述:http://www.howtocreate.co.uk/fixedPosition.html

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

希望这对您有所帮助!