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就不正常
解決方案：
注釋內容兩邊的“—”一樣長就好了。
下一條：詳細解說CSS到底是什么
