了解浏览器的工作原理

Question

最近我做了一些Web UI工作，处理所有兼容性问题和意外的浏览器（FF，IE，Safari）行为令人沮丧。

• 事件冒泡
• 创建和销毁元素
• 动态添加带有行为的元素（最初未执行）
• 与模态交互
• z索引

我试图了解浏览器的工作方式和原因，以及它们的构建方式。还有关于最佳实践的任何指针或链接。感谢

Answer 1

我在how browsers work中有一个关于这个主题的（相当长的...）摘要。您还可以查看其他参考资料列表。

Answer 2

以下是有关浏览器工作原理的一些信息性链接，以及有关CSS和跨浏览器兼容性的一些信息/指南：

• How Web Browsers Work
• How Web Browsers Work (less technical)
• CSS and Browser Compatibility
• CSS Compatibility Guide

有关您感兴趣的具体事项的一些详细信息：

• Event Bubbling and Browser Information About It
• Adding Elements to the DOM; Adding and Removing Elements Dynamically
• Modals; Cross-browser Modals
• z-index

Answer 3

真的，只需使用原型或JQuery。额外的12MB左右将大大简化您的开发。

Answer 4

YUI剧院有很多很棒的内容。观看Crockford视频，了解有关Javascript / DOM问题的更多信息。

YUI Theater

Answer 5

对于CSS跨浏览器的兼容性，CSS Reset可以帮助驯服这种疯狂（“重置样式表的目标是减少浏览器在默认行高，标题边距和字体大小等方面的不一致性，以及等等。“）。

至于与JavaScript冒泡，事件和行为的不一致，您可以使用框架来帮助减轻一些痛苦。这些框架的目标之一是“一次编写，随处运行[任何浏览器]”。 JQuery是目前最受欢迎的图书馆。 Google can help you找到其他框架。