弄过网页布局的同学都应该知道一件事情——在火狐、chrome、opera这些浏览器弄得好好的页面到了IE6中却让你无语。是的，那也就是浏览器的css兼容性问题，在IE6下有些事情就出了一些令人意想不到的bug~~所以在写css的时候推荐使用多个浏览器同时调试，才能保证兼容性问题一个接一个地被解决。

而这篇文章就是总结一下一些paperen经常遇到的css兼容性问题以及解决方法。直接切入主题吧。

1.Expanding Box Problem（扩大盒子问题……不知道我翻译得对不对）

引起这个问题的原因是容器里面的内容长度或者高度超过了容器自身所定义的宽/高度而导致的，很简单的一个例子如下：

<div style="width:10px;border:1px #CCC solid;padding:10px;">ExpandingBoxProblem</div>
paperen在opera下查看的效果是英文文本会超过容器的10px宽度，而在ie6下容器会将宽度自适应文本宽度，如果没留意的话可能导致的结果是在IE6下会影响一些元素的布局，例如如果使用了浮动。

解决办法（solution）：对于IE可以使用word-wrap: break-word，而其他浏览器可以使用overflow:hidden;

adobe上的解析说明

2.Doubled float margin bug（双浮动边距）

引起这个问题的原因是当子元素是浮动，被设置与父元素存在一定距离，父元素也浮动而且与子元素浮动方向一致时就会出现此问题。

<style>
body{margin:0;padding:0;}
ul,li{list-style:none;}
</style>
<ul style="float:left;border:1px #D0D0D0 solid;width:300px;margin:20px;padding:0;">
	<li style="float:left;margin-left:40px;">Doubled float margin bug</li>
</ul>

在opera下显示英文文本是距离左边40px的，但是在IE6下就变成双倍距离了。

解决办法（solution）：为子元素加上display: inline;

adobe上的解析说明

3.Unscrollable content bug（不能滚动的内容）

引起这个问题的原因是子元素被设置为绝对定位，父元素被设置为相对定位。

<h2 style="position:relative;border:1px #D0D0D0 solid;padding-left:40px;">Unscrollable content bug<span style="position:absolute;left:0;top:0;width:20px;height:30px;display:block;background:#CCC;"></span></h2>

在opera下灰色块是不会遮挡文本的，而IE6下的padding-left则是不会对灰色块产生任何影响，文本被其遮挡了。

解决办法（solution）：单独对IE使用zoom：1; 应用在相对定位的元素上

adobe上的解析说明

4.Disappearing List Background Bug（列表背景消失）

引起这个问题的原因是列表设置了背景而父元素被设置为浮动并是相对定位，引用adobe上的例子如下

<style>
div#wrapper {
    position: relative;  /* triggers bug */
    float: left;
    width: 250px;  
}    
div#wrapper dt {
    background:#CCCCEE;  /* triggers bug */ 
}
</style>
<div id="wrapper">
<dl>
<dt>List One</dt>  <!-- this background won't render -->
    <dd>Subitem 1 </dd>
    <dd>Subitem 2 </dd>
    <dd>Subitem 3 </dd>
    <dd>Subitem 4 </dd>
    <dd>Subitem 5 </dd>
<dt>List Two</dt>  <!-- this background will render -->
    <dd>Subitem 1 </dd>
    <dd>Subitem 2 </dd>
    <dd>Subitem 3 </dd>
    <dd>Subitem 4 </dd>
    <dd>Subitem 5 </dd>
</dl> 
</div>

opera下list one与list two都有背景的，但是IE6下则第一个没有背景

解决办法（solution）：为出现bug的列表项加上position:relative;

adobe上的解析说明

5.Extra Whitespace in List Links bug（额外空白出现在列表链接）

引起这个问题的原因列表中的链接元素被设置为display:block; 

<ul>
<li><a href="#" style="display:block;">Extra Whitespace in List Links bug</a></li>
<li><a href="#" style="display:block;">Extra Whitespace in List Links bug</a></li>
</ul>

在opera中两行文本之间的间隔是正常的，而在IE6下则间隔较大

解决办法（solution）：为每个a加上zoom:1;（应该只对IE进行hack，因为zoom属性在其他浏览器不支持）

adobe上的解析说明

6.z-index bug

最后一个，但这个paperen也没搞明白是怎出来的……有了解的同学麻烦给我说说。不过还是可以看看adobe上的解析

暂时先这么多吧，有待补充~~