IE6常見CSS解析Bug及hack-好程式設計師H5前端

1.預設高度（IE6）
描述：在IE6及以下版本中，部分塊元素擁有預設高度（在16px左右；）
hack1:給元素新增宣告：font-size:0;
hack2：給元素新增宣告：overflow:hidden;
2.圖片有邊框BUG ,當圖片加在IE上會出現邊框 Hack: 給圖片加 border:0; 或者 border:none;

3.圖片間隙 ,div中的圖片間隙BUG
描述：在div中插入圖片時，圖片會將div下方撐大大約三畫素。
hack1:將與寫在一行上； ie6
hack2:將轉為塊狀元素，給新增宣告：display:block;
hack3:給圖片新增vertical-align:top/middle/bottom.
4. 雙倍浮向（雙倍邊距）（只有IE6出現）
描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。
hack:給浮動元素新增宣告：display:inline;
5.表單元素行高對齊不一致
描述：表單元素行高對齊方式不一致
hack:給表單元素新增宣告：float:left;
6.按鈕元素預設大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1：統一大小/（用a標記模擬）
hack2:input外邊套一個標籤，在這個標籤裡寫按鈕的樣式，把input的邊框去掉。
hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可
7.百分比bug
描述：在IE7及以下版本中在解析百分比時，會按四捨五入方式計算從而導致50%加50%大於100%的情況。(也會受系統影響）
hack: 給右面的浮動元素新增宣告：clear:right; 意思：清除右浮動。
8.滑鼠指標bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該宣告，cursor屬性的pointer屬性值IE6.0以上版本及其它核心瀏覽器都識別該宣告。
hack: 如統一某元素滑鼠指標形狀為手型，應新增宣告：cursor:pointer;
9.透明屬性
相容其他瀏覽器寫法：opacity:value;(value的取值範圍0-1;
例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值範圍 0-100(整數)
10.li列表的BUG
1）：當父元素(li) 有float:left;子元素(a) 沒設定浮動的情況下會出現垂直bug；
Hack:給父元素li和子元素a都設定浮動；
2）：當給li中的a轉成block；並且有height,並有float的時候，li中沒設定浮動會出現階梯顯示，
hack：同時給li加float;
11.當li裡a、span 分別新增左右浮動時，並且li設定高度後，IE7及以下瀏覽器會出現 li下方多出3畫素左右的空隙；
hack：給li新增float：left；和width：100%；
12.當前元素(父元素裡面第一個子元素)與父元素沒有設定任何浮動的情況下，設定margin-top後，會錯誤的把margin-top加在父級元素上。

Css hack:
1.給父級元素新增overflow:hidden;(推薦使用)
2.給父元素或者子元素加浮動
3.當父元素有邊框時，可以直接給子元素新增margin-top值；
13.margin BUG

當兩個上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他們中間的距離不會相加，而是會設定為較大的值；

本文轉載於：？gcg

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69913892/viewspace-2638947/，如需轉載，請註明出處，否則將追究法律責任。

IE6常見CSS解析Bug及hack-好程式設計師H5前端

相關文章