布局8.4

標籤：

浮動後父容器高度自適應

當一個容器內元素都浮動後，它將高度將不會隨著內部元素高度的增加而增加，所以造成內容元素的顯示超出了容器。為了便於查看效果，把剛才執行個體中的#layout增加一個邊框和內邊距：

#layout { width:400px; border:2px solid #ccc; padding:2px;}

它沒有被內容元素給撐高，要解決這個問題，需要使用以下樣式

overflow:auto; zoom:1;

overflow:auto;是讓高度自適應， zoom:1;是為了相容IE6而寫（此樣式不能通過W3C驗證）。

這就是所謂的css hack，之前講解3px bug時忘記說css hack是個什麼東東了，現在補充一下：

由於不同的瀏覽器，比如IE 6,IE 7,IE8,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。 這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack。這裡的overflow:auto; zoom:1;就是所謂的css hack，這種形式是應用我們常用的代碼來解決不相容問題，也會用到添加一些特殊符號的形式，它本身沒有意義，只是針對不同瀏覽器是否對它識別來實現的

 

IE6的雙倍邊距bug

這又是IE6一個著名的bug，也是我們經常遇到的。如上例，當浮動後設定左側外邊距時後，最左側將顯示為雙倍邊距，比如設定為20，而在IE6下卻顯示40px，解決這個問題只需應用一個樣式，大家記住就可以了

display:inline;

 

又一bug：

#menu ul li { float:left;}

#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

這裡的#menu ul li a本來是可以不加float:left的，但IE6下在li沒有設定寬度，#menu ul li a設定display:block的情況下，將會顯示錯亂，所以需要在a上增加float:left來修正

 

 CSS Sprites技術

CSS Sprites在國內很多人叫css精靈或css雪碧。它是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的背景圖片定位到要顯示的位置。這樣做可以減少檔案體積，減少對伺服器的請求次數，提高效率。

講CSS Sprites之前，先把背景圖片給搞清楚

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

css背景屬性縮寫後如上所示，#ccc表示背景色；url（）裡是背景圖片路徑；接下來的兩個數值參數分別是左右和上下，第一個參數表示距左多少px，第二個參數表示距上多少，這和padding的簡寫方式是不 一樣，一定不要弄混。另外再強調一點css中值為0可以不帶單位，其它數值都必須帶單位（line-height值為多少倍時，zoom，z-index除外）；no-repeat表示背景圖片向哪個方向重複，此時為不重複。

還需說明一點的是定位元影像片位置的參數是以圖片的左上方為原點的，理解了這些，CSS Sprites技術就基本上懂了，就是靠背景圖片定位來實現的

布局8.4