Meebo栏是如何跨浏览器运行得如此之好?

How does the Meebo bar work so well cross-browser?

本文关键字：如此之运行浏览器何跨 Meebo 更新时间：2023-09-26

Meebo聊天栏是一个小的、不显眼的栏(不包括一些站点放置在其中的可选弹出窗口——尽管基本栏相当不显眼)，它贴在视窗的底部，只需要几行JavaScript就可以添加到页面中。具体来说，我感兴趣的是他们如何设法让"视口底部"定位工作得如此之好，一致，并且没有闪烁或其他跨浏览器的工件。

注意Meebo的解决方案也不需要一个特定的DOCTYPE在页面上，即使在IE中，所以无论它是做什么，它运行良好的IE怪癖模式。这是关键——我要问的是，除了添加标签或插入标签的代码外，如何使视图底部工具栏在没有对托管页面进行控制的情况下工作。CSS固定单独不是一个可接受的解决方案，因为它不能正常工作在IE怪癖模式

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

必需的浏览器支持-注意Meebo支持所有这些:IE6,IE7+，Firefox, Safari, Chrome。完全不显示(但完全不破坏页面)对于IE6来说是可以接受的，尽管首选的当然是它(像Meebo一样)在IE6中工作良好。其他浏览器如Opera也不错，但我的必需的浏览器列表在上面。

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

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

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

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

希望有帮助!

看着那个页面，我看到他们的默认解决方案是使用位置固定，但然后他们加载了混乱的CSS和javascript每个特定的浏览器通过构建URL为这些资源的相关信息(浏览器，版本等)和写/附加它们作为样式和脚本元素在头元素。

当我把IE7放在quirkmode时，我看到他们不断地用javascript重新定位div，在我的机器上，至少从重画中产生的闪烁是可怕的，但这可能是最好的方法，并且对页面的其余部分影响最小。另一个固定怪模位置的解决方法包括将元素设置为相对于视口的绝对位置，这会扰乱页面上其他所有内容的绝对位置。