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；他們中間的距離不會相加，而是會設置爲較大的值；