CSS常见兼容问题解决方案(持续更新)

1.IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。例如：
HTML：
<div .="myDiv"></div>
CSS：
.myDiv{
    width:100px;
    height:100px;
    border:1px solid #000;
    float:left;
    margin-left:30px;
}

Firefox预览结果：

IE6预览结果：

很明显的，在IE6中，margin-left:30px的边距翻倍成60px了。
解决问题：

设置display:inline;

2.上下margin重合：margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。不管IE还是Firefox都存在这问题。例如：
HTML：
<div .="topDiv"></div>
<div .="bottomDiv"></div>
CSS：
.topDiv{
    width:100px;
    height:100px;
    border:1px solid #000;
    margin-bottom:25px;
}
.bottomDiv{
    width:100px;
    height:100px;
    border:1px solid #000;
    margin-top:50px;
}
我们对上面的div设置了25px的下边距，对下方的div设置了50px的上边距。为了便于观察，这里将div的高度都设为100px。
浏览器预览结果：


可见，结果不是预期的上下div拉开75px的距离，而是拉开了半个div高度(50px)的距离。
解决问题：
统一使用margin-top或者margin-bottom，不要混合使用。这并不是技术上的必需，但却是个良好的习惯。

3.超链接访问后hover样式不出现：有时候我们同时设置了a:visited和a:hover样式，但一旦超链接访问后，hover的样式就不再出现，这是怎么回事呢？是因为将样式顺序放错了，调整为先a:visited再a:hover。关于a标签的四种状态的排序问题，有个简单好记的原则，叫做love hate原则，即i(link)ov(visited)e h(hover)a(active)e。

4.高度不适应问题：高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动扩展，特别是当内层对象使用padding或margin之后。高度不适应问题不是IE的专利，Firefox也出现这种问题。先来看看例子：
HTML：
<div id="box">
  <p>p对象中的内容</p>
</div>
CSS：
#box{
    background-color:#eee;
}
#box p{
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
}
看看代码做了什么，除了背景之外，#box仅是一个没有任何样式的div，而p加了2个关键属性margin-top:20px，margin-bottom:20px;，即上下外边距都是20px，p对象的高度应当是20+20+文字高度，即应当在40px以上。理论上#box这个div的高度会被挤开，至少达到40px以上。我们看看预览效果。
浏览器预览结果：

似乎并非预想的结果，看上去带背景的#box还是和文字一样高，并没有超过40px，这是为什么呢？为了验证一些事情，我们在html前后加上一个带背景的div。
修改后的HTML：
<div .="box2">up</div>
<div id="box">
  <p>p对象中的内容</p>
</div>
<div .="box2">down</div>
修改后的CSS：
#box{
    background-color:#eee;
}
#box p{
    margin-top:20px;
    margin-bottom:20px;
    text-align:center;
}
.box2{
    background-color:#aaa;
}
再来看下预览结果：
浏览器预览结果：

可以看到上下两个div并没有紧贴#box对象，而是有一定的间距。测量下会发现，这个间距刚好是p对象的margin上下各20px。这个测验证明了一个问题，就是#box对象并没有因其中的p对象的margin变化而改变自身的高度。而p对象的margin高度的确在整个页面中占据了一定的空间。相当于#box不动，而p把自己撑到了#box外面去了。
无论是IE还是Firefox，测试中都会发现这个问题。
解决问题：
经过一些测试，我们发现对#box定义padding或者border，就会迫使#box重新计算自己的高度，从而使自身能够适应内容的高度变化。但如果强制给对象设置了边距又会带来位移。我们需要找到一个新方法，不再从对象本身的属性入手，而是在对象的内部进行修复。我们可以在对象上下增加2个高度为0的空div，并强制内容不显示。
修改后的HTML：
<div .="box2">up</div>
<div id="box">
  <div .="height:0px;overflow:hidden"></div>
  <p>p对象中的内容</p>
  <div .="height:0px;overflow:hidden"></div>
</div>
<div .="box2">down</div>
这2个div只充当了占位符的角色，而不发生实际的占位。而对它的外层对象而言，由于其中多了一些逻辑占位对象使得它会重新计算高度，从而实现高度的自适应。
预览效果：

持续更新……