關於ie6常見瀏覽器相容問題

2021-07-11 01:21:10 字數 1644 閱讀 9456

間隙

描述:在div中插入時,會將div下方撐大三畫素。

一.div中的間隙(該bug出現在ie6及更低版本中)

解決方案:

hack1:將與寫在一行上;

hack2:將轉為塊狀元素,給新增宣告:display:block;

二. dt,li中間隙(ie6)

解決方案:

hack:將轉為塊狀元素,給新增宣告:display:block;

雙倍浮向(雙倍邊距)

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

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

預設高度(ie6)

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

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

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

表單元素行高不一致(ie,moz,c,o,s)

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

hack:給表單元素新增宣告:float:left;

按鈕元素預設大小不一 致

描述:各瀏覽器中按鈕元素大小不一致

hack1: 統一大小/(用a標記模擬)

hack2:input外邊套乙個標籤,在這個標籤裡寫按鈕的樣式,把input的邊框去掉。

hack3:如果這個按鈕是乙個,直接把作為按鈕的背景圖即可。

百分比bug

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

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

clear:left:清除左浮動

clear:both:清除兩邊的浮動

滑鼠指標bug

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

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

透明屬性

ie8以下瀏覽器寫法:filter:alpha(opacity=value);取值範圍 1-100

相容其他瀏覽器寫法:opacity:.value;(value的取值範圍0-1,0.1,0.2,0.3—–0.9)

當li裡的a轉換成塊元素時,如果想讓所有的列表項都在同一行顯示,需要將li和a都設定浮動(float)屬性,否則,ie6裡會出現每個li單獨佔一行的情況。

當li裡的a轉成塊元素時,給a寫浮動屬性後,ie6裡會錯誤的將列表項顯示成階梯狀,解決辦法將li元素也同樣填加浮動屬性。

li裡a加display:block;(ie7以下版本瀏覽器)出現行高不一致;

hack1:給a加display:inline-block;

hack2:給li加float:left;

IE6瀏覽器常見相容問題彙總

1 文件型別宣告 沒有寫宣告時,會促發ie的怪異解析 2 內外邊距 使用reset.css對樣式進行清除 3 橫向雙倍margin ie6中設定元素浮動後,會出現橫向雙倍margin值 新增display inline 4 當文字高度超過盒模型的時候,會影響布局 設定overflow hidden ...

IE瀏覽器相容問題

解決方法 各個版本的分析 x ua compatible是針對ie8新加的乙個設定,對於ie8以下的瀏覽器是不識別的,這個區別與 content ie 7 在無論頁面是否包含指令,都像是使用了 windows internet explorer 7的標準模式。而content ie emulatei...

IE瀏覽器相容問題

1.flex direction column 不豎向排列 解決方案 在ie中,flex direction column和align item不能同時使用,需要把align item刪掉 2.位置偏移 解決方案 在高版本瀏覽器中使用了position absolute,有時候只指定top或left...