【原創】CSS中經常碰到的一些奇怪…

1、Firefox中給子容器設定的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不需要定高的一個原因，也是一個技巧。


[後記]在寫樣式中，不少人喜歡定高定寬浮動，我在寫樣式過程中一般都會盡量減少這些的寫法，這些寫法雖然相容性很好，但有時候會或多或少帶來很多麻煩。要做到減少這些高寬以及浮動，我們必須累計很多技技巧才能保證相容。