### CSS兼容IE6、IE7、FF的技巧详解
#### 一、CSS Hack技术
**CSS Hack**是一种针对不同浏览器的特性和版本差异编写特定样式的技术。它可以帮助开发者解决跨浏览器兼容性问题。
##### 1. 通用Hack方法
对于**IE6、IE7和Firefox**之间的兼容性差异，可以通过不同的条件注释或者特殊的语法来实现。
**示例代码**：
```css
#container {
width: 100px !important; /* IE7 和 Firefox */
width: 80px; /* IE6 */
}
```
在上面的例子中，`!important`用于覆盖其他规则，确保IE7和Firefox能够正确解析宽度为100px，而IE6则解析为80px。
##### 2. 特定版本Hack
通过使用特定的语法，可以更精确地针对IE6和IE7进行样式定制。
**示例代码**：
```css
#container {
width: 120px; /* Firefox */
*html #container { /* IE6 */
width: 80px;
}
*+html #container { /* IE7 */
width: 60px;
}
}
```
注意：`*+html`是针对IE7的特殊选择器，而`*html`则是IE6的专用选择器。这种写法可以有效地解决不同IE版本之间的样式差异问题。
#### 二、清除浮动问题
在布局中，清除浮动是非常重要的一步，尤其是在IE6和IE7中，因为这些浏览器对浮动的支持并不完善。
**示例代码**：
```css
/* ClearFix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac */
.clearfix { display: block; }
/* End hide from IE Mac */
```
#### 三、其他常见兼容性问题
除了以上提到的CSS Hack技术和清除浮动外，还有许多其他的兼容性问题需要注意：
##### 1. Padding和Width的处理
- **IE与Firefox的差异**：在IE中，元素的`width`包含了`padding`，而在Firefox中，`width`不包含`padding`。
- **解决方法**：可以通过设置`!important`来覆盖默认行为，或者使用盒模型（box model）调整。
##### 2. 定位问题
- **IE6的定位问题**：IE6对于`position: absolute`或`position: relative`的元素位置计算有误。
- **解决方法**：
- 直接设置`.line-height`等于当前div的高度，并通过`vertical-align: middle`来居中显示。
- 使用`margin: 0 auto`来进行水平居中。
- 将`a`标签设置为`display: block`以解决某些布局问题。
##### 3. Margin和Padding的处理
- **UL标签的问题**：在Firefox中，默认的`list-style`和`padding`会导致列表样式出现差异。
- **解决方法**：在样式表中明确重置`ul`标签的`list-style`和`padding`属性。
##### 4. 溢出问题
- **IE6中的溢出问题**：如果一个元素设置了`overflow: hidden`，但是在内部有浮动元素时，IE6可能会忽略该属性。
- **解决方法**：使用`overflow: auto`或者`overflow: scroll`来强制隐藏溢出部分。
##### 5. 光标样式
- **IE6、IE7和Firefox的光标样式差异**：`cursor: pointer`在IE6、IE7和Firefox中显示的效果不同。
- **解决方法**：使用CSS Hack技术来分别设置不同浏览器下的光标样式。
##### 6. 浮动元素的间距
- **IE6和Firefox中的间距差异**：当元素使用`float`时，IE6会计算额外的2像素间距。
- **解决方法**：使用`display: inline`或者`zoom: 1`来解决该问题。
通过上述方法，我们可以有效地解决IE6、IE7以及Firefox等浏览器之间的兼容性问题，提高网站在不同浏览器环境下的表现一致性。
