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;