天天看點

IE6常見CSS解析Bug和hack

第一:圖檔間隙

  a:div中的圖檔間隙;

   描述:在div中插入圖檔時,圖檔會将div下方撐大3像素

    hack1:将<div>和<img>寫在一行

    hack2:将<img>轉為塊元素,給<img>添加聲明:display:block;

    hack3:給<div>設定:overflow:hidden

  b:dt,li中圖檔間隙

    hack:同a中的hack2,hack3方法

第二:預設高度

 描述:在IE6及以下版本中,部分塊元素具有預設高度(低于18px高度)

  hack1:給元素添加聲明:font-size:0;

  hack2:給元素添加聲明:overflow:hidden;

第三:雙倍浮動(雙倍邊距)

 描述:當IE6及更低版本浏覽器在解析浮動元素時,會錯誤的把浮向邊邊界加倍顯示

  hack:給浮動元素添加聲明:display:inline;

第四:表單元素行高不一緻(幾乎沒個浏覽器都有)

 描述:表單元素行高對齊方式不一緻

  hack:給表單元素添加聲明:float:left;

第五:按鈕元素預設大小不一

 描述:個浏覽器中按鈕元素大小不一緻

  hack1:統一大小(用其他标簽模拟按鈕)

  hack2:input外邊套一個标簽,在這個标簽上邊寫按鈕的樣式,把input标簽的邊框和背景樣式去掉

  hack3:将按鈕樣式的圖檔直接設定為背景圖檔

第六:百分比Bug

 描述:IE浏覽器在解析百分比時,會按四舍五入的方式計算進而導緻50%+50%>100%的情況

  hack:給右面的浮動元素添加聲明:clear:right;或者clear:left;或者clear:both;

第七:滑鼠指針Bug

 描述:cursor屬性的hand屬性值隻在IE6及以下版本浏覽器識别,其他浏覽器不識别該聲明,cursor的pointer屬性值IE6以上版本及其他浏覽器都識别

  hack:統一滑鼠手型形狀應将cursor:hand;加上,預設的為cursor:pointer;

第八:透明屬性

  hack:IE浏覽器(8以下):filter:alpha(opacity=value);(取值範圍1到100),其他浏覽器寫法:opacity:value;(value的取值範圍0.1到1)

第九:過濾器

  1:下劃線過濾器

   描述:在一個屬性前加了下劃線後,在IE6及以下版本能識别這個規則,别的浏覽器則不識别而忽略這個屬性

  2:important關鍵字過濾器

   描述:表示所附加的聲明具有最高優先級的意思,IE6及以下版本不識别

轉載于:https://www.cnblogs.com/shenhf/p/7567968.html