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

一、火狐中給子容器設置的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

二、margin-top失效
由於父容器設置了float，而子容器沒有，兩種解決辦法，一種清除浮動，一種父容器浮動，子容器也浮動
三、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/

四、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不適應問題。

五、父容器的背景顏色延續不到子容器（或者說給父容器定的邊框不會被子容器撐開）
<div class="wraper">
    <div class="f_l"></div>
    <div class="f_r"></div>
   <div class="clear"></div> </div> 你們能夠發現，給wraper設置了背景顏色，但實際上在浮動對象未添加clear以前這個顏色是不會延續到子容器的，解決辦法就是上面那個了，只有加上clear後父容器才知道子容器高度，這也是我寫CSS不須要定高的一個緣由，也是一個技巧。 [後記]在寫樣式中，很多人喜歡定高定寬浮動，我在寫樣式過程當中通常都會盡可能減小這些的寫法，這些寫法雖然兼容性很好，但有時候會或多或少帶來不少麻煩。要作到減小這些高寬以及浮動，咱們必須累計不少技技巧才能保證兼容。