IE6兼容筆記

meislzhua 發布于2019-08-01 18:43 / 1566人閱讀

摘要：如果都已經淘汰，雖說也極少數企業單位會用到低版本的深坑瀏覽器，不過基本上現在做前端開發都較少去兼容的低端瀏覽器。現在僅僅是把當初的一個筆記記錄一下。

如果IE678都已經淘汰，雖說也極少數企業單位會用到IE低版本的深坑瀏覽器，不過基本上現在做web前端開發都較少去兼容IE的低端瀏覽器。想想當初學習web前端，不可避免的要了解關于IE瀏覽器兼容方面上的處理，即使在工作以后，基本上也沒有處理過IE低版本瀏覽器的兼容問題。現在僅僅是把當初的一個筆記記錄一下。

1.兼容IE6背景圖片透明

第一種方法：把圖片更換為png-8圖片
第二種方法：在head標簽下引入js代碼

2.ie6下margin雙倍問題

IE6會在特定的條件下，將設置的橫向margin值變成雙倍。條件：
1.元素必須浮動（float）;
2.元素必須具有橫向margin，margin-left、margin-right
3.元素必須塊元素
4.瀏覽器必須是ie6

解決方案 設置浮動元素的_display:inline;

注意：IE6雙邊距產生是父子之間、兄弟之間不會產生
示例（ietester 測試 ie6）：

測試結果：

3.a的偽類hover兼容問題

這個來源網絡

4.IE6支持hover解決方案(除a標簽)

在IE6下除了a標簽有hover效果外，其他標簽是沒有hover效果，為了解決這個問題，則可以引入一個文件（csshover.htc）來處理：
只要在body標簽下引入htc文件，如：

body{
    behavior:url("csshover.htc");
}

5.CSS背景透明兼容ie6樣式

#element{
    opacity:0.5;
    filter:alpha(opacity=50);
}

6.inline-block兼容IE67

display:inline-block;
不支持IE6，7(注：針對塊元素，行元素支持)

解決方法：
先讓塊元素變為內聯，再使用（zoom:1 或float屬性等）觸發塊元素layout
display:inline-block;
*display:inline;
*zoom:1;

代碼示例

IE6下測試(IEtester工具)

7.ie6下最小高度19px

在ie6下設置元素最小高度小于19px無效

解決方法：overflow:hidden

8.ie6下絕對定位問題

ie6下絕對定位元素的父級寬高是奇數的時候元素的right和bottom值會相差1px
html代碼：

IE6瀏覽器：

GPU云服務器云服務器 IE6兼容兼容IE6 ie6兼容性解決ie6不兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52039.html

前端筆記

摘要：一嚴格模式與混雜模式如何觸發這兩種模式，區分它們有何意義聲明位于文檔中的最前面的位置，處于標簽之前。包含過渡和的也導致頁面以標準模式呈現，但是有過渡而沒有會導致頁面以混雜模式呈現。不存在或形式不正確會導致和文檔以混雜模式呈現。一：HTML+css 1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? Doctype聲明位于文檔中的最前面的位置，處于標簽...

未東興 2019-08-21 11:26 評論0 收藏0
前端筆記

摘要：一嚴格模式與混雜模式如何觸發這兩種模式，區分它們有何意義聲明位于文檔中的最前面的位置，處于標簽之前。包含過渡和的也導致頁面以標準模式呈現，但是有過渡而沒有會導致頁面以混雜模式呈現。不存在或形式不正確會導致和文檔以混雜模式呈現。一：HTML+css 1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? Doctype聲明位于文檔中的最前面的位置，處于標簽...

binta 2019-08-30 13:17 評論0 收藏0
前端筆記

摘要：一嚴格模式與混雜模式如何觸發這兩種模式，區分它們有何意義聲明位于文檔中的最前面的位置，處于標簽之前。包含過渡和的也導致頁面以標準模式呈現，但是有過渡而沒有會導致頁面以混雜模式呈現。不存在或形式不正確會導致和文檔以混雜模式呈現。一：HTML+css 1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? Doctype聲明位于文檔中的最前面的位置，處于標簽...

lk20150415 2019-08-01 16:09 評論0 收藏0
【零基礎入門】 css學習筆記（3）選擇器與層疊性

摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現多次補充后代選擇器中出現的東西很靈活，可以是標簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。一，選擇器 1，基礎選擇器 1）標簽選擇器：div{ } ，選擇的所有，而不是一個，用來描述共性。 2）類選擇器：.class名{ } 多個元素可以同時屬...

cppprimer 2019-08-29 15:43 評論0 收藏0
前端學習筆記（CSS、JS基礎篇）

摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調式的標簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關再開，避免多次觸發而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！！！ div padding：內邊距。盒子內容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改...

caikeal 2019-08-19 17:57 評論0 收藏0