【原创】CSS中经常碰到的一些奇怪…

1、火狐中给子容器设置的margin-top转移到父容器上了

当给box2设置margin-top时，在FF下仅作用于父容器。

解决办法：

a.给父容器box加overflow:hidden;属性

b.父容器box加border除none以外的属性

c.用父容器box的padding-top代替margin-top

http://bbs.blueidea.com/thread-2926494-1-1.html

2、margin-top失效
因为父容器设置了float，而子容器没有，两种解决办法，一种清除浮动，一种父容器浮动，子容器也浮动
3、IE中li的高度比firefox高

在样式表中给ul增加属性zoom:1;就ok了

更完美的解决方案

ul { 
margin:0; 
padding:10px; 
list-style:none; 
background-color:#006699; 
zoom:1;/* ie */ 
} 
ul:after { 
content:"."; 
display:block; 
clear:both; 
height:0; 
font-size:0; 
line-height:0; 
}

见zoom解决ul在ie下自适应li高度（兼容ie,firefox,ie8)  http://123luoxiaoli.blog.163.com/blog/static/703343312013274376313/

4、ul中li之间有间距但容器右侧没有间距
遇到这种情况我们不能用简单的margin-right来解决，父容器的宽度根本不够，要从根本上解决这个问题，大家可以研究下网易新浪的写法，网易有两种写法，一种是在最后一个li中加class="last"，当然这种不是很完美，最好的效果是网易首页“图片暴龙”区域的写法，非常巧妙，有兴趣的童鞋可以研究下，其实有效的CSS也很精简，只有两三个属性

<div class="im02limg">
<ul class="clearfix">
<li><a href="#" target="_blank"> <img src="src" width="128" height="128"/> <p>名字</p> </a> </li> 
<li><a href="#" target="_blank"> <img src="src" width="128" height="128"/> <p>名字</p> </a> </li> 
<li><a href="#" target="_blank"> <img src="src" width="128" height="128"/> <p>名字</p> </a> </li> 
<li><a href="#" target="_blank"> <img src="src" width="128" height="128"/> <p>名字</p> </a> </li> 
<li><a href="#" target="_blank"> <img src="src" width="128" height="128"/> <p>名字</p> </a> </li> 
</ul>
</div>

.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}
.clearit{clear:both;font-size:0;line-height:0;height:0;}
.clear {clear:both; height:1px; margin-top:-1px; overflow:hidden;}
.im02limg{ width:672px; overflow:hidden;
}
.im02limg ul{ margin-left:-8px;
}
.im02limg ul li{ margin-left:8px; float:left; width:128px;_display:inline; overflow:hidden;
}
.im02limg ul li img{ width:128px; height:128px;
}
.im02limg ul li p{ widows:128px; height:40px; line-height:40px; text-align:center;
}

要注意几点，父容器定宽并且超出隐藏必须要，UL的页面结构上要加上clearfix，否则都是没效果的,LI的_display:inline就解决了IE6不适应问题。

5、父容器的背景颜色延续不到子容器（或者说给父容器定的边框不会被子容器撑开）
<div class="wraper">
    <div class="f_l"></div>
    <div class="f_r"></div>
   <div class="clear"></div>
</div>
大家可以发现，给wraper设置了背景颜色，但实际上在浮动对象未添加clear之前这个颜色是不会延续到子容器的，解决办法就是上面那个了，只有加上clear后父容器才知道子容器高度，这也是我写CSS不需要定高的一个原因，也是一个技巧。


[后记]在写样式中，不少人喜欢定高定宽浮动，我在写样式过程中一般都会尽量减少这些的写法，这些写法虽然兼容性很好，但有时候会或多或少带来很多麻烦。要做到减少这些高宽以及浮动，我们必须累计很多技技巧才能保证兼容。