DIV+CSS浏览器兼容性问题与解决策略

"这篇文章主要探讨了在网页设计中使用DIV+CSS时遇到的IE与Firefox浏览器的兼容性问题，由Kingwell整理，并分享在http://blog.sina.com.cn/s/articlelist_1270817233_0_1.html。作者强调了解决浏览器兼容性问题的重要性，并提出了一些关键的HTML编码要素来帮助优化兼容性。" 在网页开发中，特别是使用DIV+CSS布局时，IE（Internet Explorer）和Firefox（FF）的兼容性问题是一个常见的挑战。文章首先指出文字大小的不一致性，即使设置了相同的`font-size:14px`，各浏览器显示的高度和空白处理也会有所不同。例如，IE下文字实际高度为16px，上下留白分别是3px；而Firefox下则是17px，上留白1px，下留白3px。解决这个问题的方法是在文字样式中设定`line-height`，确保所有文字有统一的行间距。 其次，文章提到Firefox下如果给容器设定了固定`height`，其边框外形将不会因内容而改变，而在IE下容器会被内容撑大，导致高度限制失效。因此，应谨慎使用`height`属性，以防止不必要的兼容性问题。 针对内容可能会撑破容器的情况，尤其是在横向布局中，Firefox倾向于拉伸未定义宽度的浮动容器，而IE会优先考虑内容折行。因此，为了防止内容撑破浮动容器，应该为这些容器定义明确的`width`。 作者还通过一些实验代码展示了不同浏览器对容器边界的解释差异，如设置不同`border`、`height`、`width`、`float`和`overflow:hidden`等属性时的效果。这些实验进一步强调了浏览器间解释规则的差异，提示开发者在编写CSS时需要考虑到这些差异。 解决IE与Firefox的兼容性问题需要深入理解每个浏览器的渲染机制，并采取相应的技术措施，比如合理设置`line-height`、避免无谓的`height`限制、为浮动元素设定宽度等。这有助于创建更为稳定和一致的跨浏览器用户体验。