Meebo 栏如何在跨浏览器上运行得这么好？
Meebo 聊天栏 是一个小型、不引人注目的栏（不包括一些可选的弹出窗口）一些网站放在其中 - 底部栏非常不引人注目）粘在底部viewport 并只需几行 JavaScript 即可添加到页面。具体来说，我感兴趣的是他们如何设法使“视口底部”定位工作得如此良好、一致，并且跨浏览器不会出现闪烁或其他伪影。
请注意，Meebo 解决方案也不需要页面上的特定 DOCTYPE，即使在 IE 中也是如此，因此无论他们在做什么，它都可以在 IE Quirks 模式下正常运行。这是关键 - 我要问的是，除了添加标签或插入标签的代码之外，即使在无法控制托管页面的情况下，如何使视口底部工具栏也能工作。 单独修复 CSS 并不是一个可接受的解决方案，因为它在 IE Quirks 模式下无法正常工作。
此外，虽然我以 Meebo 栏为例，但我实际上并不是在寻找社交工具栏，因此我不能只使用 Meebo。
所需的浏览器支持 - 请注意，Meebo 支持所有这些浏览器：IE6、IE7+、Firefox、Safari、Chrome。对于 IE6 来说，完全不显示（但根本不破坏页面）是可以接受的，尽管人们当然更希望它（像 Meebo 一样）在 IE6 中正常工作。其他浏览器（例如 Opera）会很好，但我的必需浏览器列表在上面。
The Meebo chat bar is a small, unobtrusive bar (not counting some of the optional popups some sites put within it - the base bar is quite unobtrusive though) that sticks to the bottom of the viewport and is added to the page with only a few lines of JavaScript. Specifically, I'm interested in how they manage to get the "bottom of viewport" positioning to work so well, consistently, and without flickering or other artifacts cross-browser.
Note that the Meebo solution also does NOT require a specific DOCTYPE on the pages, even in IE, so whatever it is they're doing it runs fine in IE Quirks Mode. This is key - what I'm asking about is how to make a bottom-of-viewport toolbar work even without control over the hosting page aside from adding a tag or code that inserts a tag. CSS Fixed alone is NOT an acceptable solution because it does not work properly in IE Quirks mode.
Also, while I am mentioning the Meebo bar as an example, I am not actually looking for a social toolbar, so I can't just use Meebo.
Required browser support - note that Meebo supports all of these: IE6,IE7+,Firefox, Safari, Chrome. Not showing up at all (but not breaking the page at all) is acceptable for IE6, though the preference would of course be for it to (like Meebo) work fine in IE6. Other browsers such as Opera would be nice to haves, but my required browser list is above.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
简单的答案是，对于怪异模式和 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
希望如此有帮助！
The simple answer is that for quirks mode and IE6, we exploit the power of CSS expressions to calculate the position of the element dynamically. As nwellcome pointed out, we serve targeted CSS files for each browser so we are able to implement this behavior without exploiting */_ bugs or other odd browser targeting hacks.
Furthermore, we exploit an interesting behavior of the IE rendering engine where, if a background property is set on the HTML or Body element, IE will calculate the positioning of fixed elements before redrawing. This cuts down significantly on the flickering behavior that you normally see with JavaScript-based approaches of repositioning the element on scroll / resize.
This site provides a great overview of the solution for implementing position:fixed across all the major browsers: http://www.howtocreate.co.uk/fixedPosition.html
It also references the rather ingenious solution to the flickering issue: http://www.howtocreate.co.uk/emails/LinusSylven.html
Hope this helped!
查看该页面，我发现他们的默认解决方案是使用固定位置，但随后他们通过根据相关信息（浏览器、版本等）构建这些资源的 URL，为每个特定浏览器加载一堆 CSS 和 javascript并将它们作为样式和脚本元素写入/附加到 head 元素中。
当我将 IE7 置于怪异模式时，我看到它们不断地使用 javascript 重新定位 div，并且在我的机器上，至少重绘造成的闪烁很糟糕，但这可能是最好的方法，并且对其余部分的影响最小。页。其他怪异模式位置固定解决方法涉及将元素设置为相对于视口的绝对定位，这会扰乱页面上其他所有内容的绝对定位。
Looking at that page I see that their default solution is to use position fixed, but then they load a mess of CSS and javascript per the specific browser by constructing the URL for those resources out of pieces of relevant info (browser, version, etc) and writing/appending them as style and script elements in the head element.
When I put IE7 in quirksmode I see that they are continuously re-positioning the div with javascript and on my machine at least the flicker from redrawing is terrible, but this is likely the best one can do and be minimally invasive to the rest of the page. The other quirksmode position fixed workarounds involve setting the element to be absolutely positioned relative to the viewport which messes up absolute positioning for everything else on the page.