1. 程式人生 > >PC端頁面開發基礎-IE6常見CSS解析Bug及Hack

PC端頁面開發基礎-IE6常見CSS解析Bug及Hack

        萬惡的IE6。你可能用不著,但你的程式碼永遠要考慮到它的相容性問題。

 

1)圖片間隙(詳見上文《問題總結(一)》)

  A)在元素中直接插入圖片時,圖片下方會產生約3畫素的間隙(該bug出現在IE6及更低版本中)

    hack1:將<img>轉為塊狀元素,給<img>新增宣告:display:block;

    hack2:將img設定vertical-align:top/middle/bottom;只要不為baseline

 

2) 雙倍浮向(雙倍邊距)

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

    hack:給浮動元素新增宣告:display:inline;

 

3)預設高度(IE6)

  描述:在IE6/ie7及以下版本中,部分塊元素擁有預設高度(低於16px高度)

    hack1:給元素新增宣告:font-size:0;

    hack2:給元素新增宣告:overflow:hidden;

 

4)百分比bug

  描述:在IE6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。

    hack:給右面的浮動元素新增宣告:clear:right;     意思:清除右浮動。     

 

 

5)表單元素高度及對齊方式不一致(IE,MOZ,C,O,S)

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

    hack:給表單元素新增宣告:float:left;或vertical-align:top;

  2)表單元素中按鈕的解析是按怪異盒模型解析的。

  3)直接去掉表單控制元件的邊框時用border:0;border:none;不能相容ie7以下瀏覽器。

 

 

*透明寫法

  1.opacity:0~1;IE8以上的瀏覽器.1

  2.filter:alpha(opacity=1~100);     IE9及IE9以下的瀏覽器

 

6)列表階梯BUG(IE6及更低版本的瀏覽器中)

  bug1:在給的子元素中使用了Float:left;父元素中沒有設定浮動屬性,li階梯狀效果。

    hack:給父元素設定浮動便能解決此問題

 

  bug2:當給LI裡的A轉成塊元素,並設定了固定高度時,且給父元素寫了浮動後在IE6及更低的版本瀏覽器裡會出現垂直顯示。

    hack:給a也設定左浮動便可解決。

 

7)滑鼠指標bug

  描述:cursor屬性的hand屬性值只有IE瀏覽器識別,其它瀏覽器不識別該宣告,cursor屬性的pointer屬性值IE6.0以上版本及其它核心瀏覽器都識別該宣告。

    hack:如統一某元素滑鼠指標形狀為手型,應新增宣告:cursor:pointer;