CSS兼容问题：IE与FF对容器宽度差异及解决方案

本文主要讨论了在IE6和Firefox浏览器下CSS容器宽度处理的不同，以及如何解决IE浏览器的兼容性问题。首先，IE6在解析CSS时会进入quirks模式，这导致了`div`元素的宽度计算方式与标准模式下的Firefox不同。在IE6中，`width`属性不包含边框（border）的宽度，而Firefox则将其计算在内，导致IE6显示的宽度为200px，而Firefox为220px。 为了处理这种差异，文章提供了一些CSS技巧和兼容性hack方法： 1. **CSS Hack**: - 使用`*`和`_`前缀针对特定版本的IE进行hack，例如`:hover`伪类在Firefox中有效，`*hover`和`_hover`分别对应IE6和IE7。 - 使用条件注释 `<![if IE]>` 来根据浏览器版本加载不同的CSS样式表，如`ie.css`和`ie7.css`。 2. **CSS Filter Approach**: - 利用CSS的`:lang()`选择器，虽然IE7不支持，但可以利用其不支持的特性，通过设置`!important`来达到预期效果，同时注意可能会影响Safari等其他浏览器的兼容性。 - `:empty`选择器用于IE6和Firefox之外的浏览器，实现特定元素的样式覆盖。 3. **解决IE与宽度和高度问题**: - IE不识别`min-`前缀的宽度和高度定义，因此需要通过组合`width`、`height`和`min-width`、`min-height`来确保在IE下也能得到正确的尺寸。 4. **页面最小宽度**: - 使用`min-width`和`min-height`来设定元素的最小尺寸，但需额外调整`width`和`height`为`auto`，并在IE下使用这些属性，以确保在所有浏览器中都能正确工作。 作者强调了在开发过程中处理不同浏览器兼容性的必要性，并提供了多种CSS技巧和hack策略来解决IE6和Firefox之间的差异。通过理解和应用这些方法，开发者可以更好地确保网页在各种浏览器上的正常显示。