0

Meebo 聊天栏是一个很小的、不显眼的栏（不包括一些网站放入其中的一些可选弹出窗口 - 虽然基本栏非常不显眼），它贴在视口的底部，并添加到页面中，只有几个JavaScript 行。具体来说，我对他们如何设法让“视口底部”定位工作得如此出色、一致且没有闪烁或其他跨浏览器的伪影感兴趣。

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

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

所需的浏览器支持 - 请注意，Meebo 支持所有这些：IE6、IE7+、Firefox、Safari、Chrome。IE6 可以接受根本不显示（但根本不破坏页面），尽管偏好当然是它（如 Meebo）在 IE6 中正常工作。其他浏览器如 Opera 也不错，但我需要的浏览器列表在上面。

4

2 回答 2

6

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

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

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

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

希望这有帮助！

于 2011-11-02T19:10:17.273 回答
1

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

当我将 IE7 置于 quirksmode 时，我看到他们不断地使用 javascript 重新定位 div，并且在我的机器上，至少重绘的闪烁是可怕的，但这可能是最好的，并且对其余部分的侵入性最小页。其他 quirksmode 位置固定解决方法包括将元素设置为相对于视口绝对定位，这会扰乱页面上其他所有内容的绝对定位。

于 2011-11-01T15:32:24.543 回答