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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章