### IE与FF的兼容问题
#### CSS篇
在网页开发过程中，不同的浏览器对CSS的支持程度不一，导致了诸多兼容性问题。以下列举了一些IE（Internet Explorer）与Firefox（火狐浏览器）之间的常见CSS兼容性差异及其解决方案。
1. **DOCTYPE的影响**
DOCTYPE的选择对浏览器渲染模式有直接影响，这会影响到CSS的解析方式。标准模式和怪异模式在某些CSS属性上的表现有所不同。例如，在IE中，如果不指定DOCTYPE或指定为HTML 4.01 Transitional，可能会出现一些布局上的问题。
2. **自动边距处理**
在Firefox中，当`div`元素的`margin-left`和`margin-right`被设置为`auto`时，该元素会被居中显示。然而，在IE中，这种方式可能不起作用，需要显式设置这两个值才能实现居中效果。
3. **文本对齐方式**
当在Firefox中将`body`元素的`text-align`属性设置为某个值时，内部的`div`如果想要居中，需要设置`margin: auto`（而非单独设置`margin-left`和`margin-right`）。但在IE中这样做可能不起作用。
4. **内边距与高度宽度计算**
Firefox会正确地将元素的高度和宽度计算为内容加上内边距（padding），而IE则不会将内边距计算在内。为了避免这种差异，可以使用`!important`关键字来强制IE遵循特定的值。
5. **`!important`的使用**
Firefox支持使用`!important`关键字来增加CSS样式的优先级，但IE并不支持。因此，在需要覆盖其他样式的情况下，应明确地使用`!important`并确保其只作用于Firefox，对于IE可以采用其他方法来实现。
6. **垂直对齐问题**
对于需要垂直居中的元素，可以通过设置`vertical-align: middle`来实现。但是，在IE和Firefox中，这种方法的表现不同。一个可行的方案是通过调整`line-height`的值来实现元素的垂直居中。
7. **光标样式**
设置`cursor: pointer`会使鼠标在悬停时变为手形指针。在IE中，这通常表示可点击的对象，而在Firefox中，相同的样式可能不起作用。
8. **菜单栏的高度问题**
在创建菜单栏时，如果希望每个菜单项保持一定的高度，那么需要同时设置`display: block`和`float: left`。此外，还需要注意IE与Firefox在计算高度时的差异。
9. **盒模型的差异**
Firefox和其他基于Gecko引擎的浏览器（如Mozilla）遵循W3C推荐的盒模型，即宽度和高度包括了内容、内边距和边框的总和。而IE5和IE6则使用了不同的盒模型，其中宽度和高度仅包括内容区域，不包括内边距和边框。
为了解决这个问题，可以通过设置`!important`来区分对待IE和Firefox：
```css
div {
margin: 30px !important;
margin: 28px;
}
```
这样写是为了确保Firefox使用30px的外边距，而IE使用28px。
10. **宽度和边距的差异**
在IE5和IE6中，如果设置了`margin`，那么元素的实际宽度计算方式不同。例如，在IE6中，如果一个元素的宽度设置为300px，并且左右两边都有10px的边距，那么它的实际宽度将是320px（300 + 10 + 10）。为了解决这个问题，可以使用特殊的CSS hack来针对不同的IE版本进行处理。
11. **清除浮动**
使用`float`属性来布局元素时，需要特别注意清除浮动的问题。在IE和Firefox中，清除浮动的方式有所不同。通常使用`.clear { clear: both; }`或设置父元素的`overflow`属性为`hidden`来解决这个问题。
12. **边距折叠**
在IE中，浮动元素的边距可能会出现所谓的“边距折叠”现象，即相邻元素的边距会合并成一个更大的边距。为了解决这个问题，可以将元素的`display`属性设置为`inline`来避免这种现象。
13. **图片与背景图的定位**
在处理背景图像的位置时，需要注意IE与Firefox之间的一些细微差别。例如，为了确保在所有浏览器中背景图像的位置都一致，可以使用不同的定位策略。
14. **高度的计算**
高度的计算也是CSS兼容性问题的一个重要方面。不同的浏览器对高度的计算方式不同，尤其是在涉及到浮动元素的情况下。开发者需要确保在所有浏览器中都能得到一致的布局效果。
15. **`!important`的使用技巧**
在需要对某些样式进行特殊处理时，可以利用`!important`的特性来实现。例如，为了确保在IE中背景图像的位置正确，可以使用如下CSS代码：
```css
#example {
background: url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /* Style for FF */
background: url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
}
```
16. **IE7的CSS支持**
IE7相比之前的版本，在CSS的支持上有所改善。开发者在编写CSS代码时，需要考虑到IE7的特性。例如，可以使用条件注释或者特定的CSS hack来针对IE7进行优化。
17. **条件注释的使用**
条件注释允许开发者为特定版本的IE编写CSS代码。例如，下面的代码段可以用来专门针对IE6和IE7编写样式：
```css
/* Moz */
#example { color: #333; }
/* IE6 */
*html #example { color: #666; }
/* IE7 */
*+html #example { color: #999; }
```
以上列举了IE与Firefox之间的部分CSS兼容性问题及其解决方法。在实际开发过程中，开发者需要根据项目的具体需求和目标用户群体来决定是否需要处理这些兼容性问题。随着现代浏览器的发展和普及，越来越多的网站选择放弃对老旧浏览器的支持，转而专注于提供更流畅、更安全的用户体验。
