1. 
            
             
        
      2. 
    
      

    

      







      
    
      
        
      
            
      DIV+CSS設計要注意的問題
      
            
            
      2010-12-24
      
            
      
	      做網站時DIV+CSS設計要注意的問題 

      

      
	1、css 命名不能帶下劃線開頭，不然ie6某些版本不識別。如 <div class="_box"></div>. 

      

      
	2、IE6 下 DIV 小高度不能為 0 或小于12 的解決方法。 

      

      
	在網頁布局時常會用到 DIV 來顯示一些邊角背景，需要設置較小的高度，默認情況下，IE6 中設置 DIV 較小高度會不起作用，在 IE7、FF 等瀏覽器不存在這個問題。 

      

      
	IE6 下默認的字體尺寸大致在 12 - 14px 之間，當你試圖定義一個高度小于這個默認值的 DIV 的時候， IE6 會固執的認為這個層的高度不應該小于字體的行高。所以即使你用 height:5px; 來定義了一個 DIV 的高度，實際在 IE6 下顯示的仍然是一個 12px 左右高度的層。 

      

      
	要解決這個問題，可以強制定義該 DIV 的字體尺寸，或者定義 overflow 屬性來限制 DIV 高度的自動調整。比如: 

      

      
	<div style="height: 5px; font: 0px Arial; line-height:0;"></div> 

      

      
	或者 

      

      
	<div style="height: 5px; overflow: hidden;"></div> 

      

      
	值得注意的是，設置 font-size:0 時這個容器的高度小為 2px ，如果要設置 DIV 高度為 0 或 1px ，則需要使用 overflow:hidden; 來實現。 

      

      
	3、IE6中用了float:left之后導致margin-left雙倍邊距的BUG解決方法。 

      
 

      
	4、html中width元素無效的解決辦法。對于內聯元素（span,a 或者 display: inline元素），對于 IE6，如果瀏覽器運行于標準兼容模式下，內聯元素會忽略 width 或 height 屬性，所以設置 width 或 height 不能在此種情況下令該元素具有 layout。 

      

      
	方法一， 

      

      
	如果設置display:block，width屬性生效，但是此時的span跟div一樣了。 
      
如果設置display:inline-block，則span并列在同行，而且width屬性生效。       

      

      
	元素display屬性的常見值說明： 
      
block：塊對象的默認值。將對象強制作為塊對象呈遞，為對象之后添加新行。 
      
inline：內聯對象的默認值。將對象強制作為內聯對象呈遞，從對象中刪除行。       

      

      
	inline-block：將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。 
      
non：隱藏對象。與 visibility 屬性的hidden值不同，其不為被隱藏的對象保留其物理空間。       

      

      
	解決方法二，如果設置float:left | right,width屬性生效. 
      
(浮動)他使得指定元素脫離普通的文檔流而產生的非凡的布局特性。并且FLOAT必需應用在塊級元素之上，也就是說浮動并不應用于內聯標簽。或者換句話來說當應用了FLOAT那么這個元素將被指定為塊級元素。       

      

      
	display：inline屬性與float的區別 
      
Display：inline；屬性的作用就是使塊級元素變成行內元素，比如p這樣的，設置inline屬性以后，就會不再單獨占據一行的位置了。不過使用float 屬性頁同樣可以實現這樣的效果。 （關于行內元素和塊級元素請看行內元素和塊級元素） 
      
當元素設置成為inline屬性，變成行內元素以后，設置width屬性也就沒有效果了。 
      
看完display：inline對塊級元素的影響以后，我們再來看看float對行內元素的影響 
      
也就是當行內元素設置float屬性以后，實際上他已經認為他是塊級元素了，可以設置 width屬性了。       

      

      
	 5、頁html中有注釋: <!-- 中間 左邊 ------- -->  ie正常,firefox就不正常 
      
解決方案： 
      
注釋內容兩邊的“—”一樣長就好了。