CSS 中ie6相容問題

2021-07-11 04:43:10 字數 2412 閱讀 6927

1)css bug:css樣式在各個瀏覽器中解析不一致的情況,或者說是css樣式在瀏覽器中不正確顯示問題,成為css bug

2)css  hack: css 中,hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法,因為他們都屬於個人對css**的

非官方修改,或者非官方補丁。有人喜歡用patch(補丁)來描述這種行為。

3)filter:表示過濾器的意思,是一種對特定瀏覽器或者瀏覽器組顯示或者隱藏規定宣告的方法,本質上說,filter是一種用來

過濾不同瀏覽器的hack型別

*使用hack帶來一些***

ie6常見css解析bug和hack

1)間隙

a) div中間隙(出現在ie6以及更低版本中)

hack1:將

和hack2 :將

b)dt,li中間隙問題(ie 6)

hack : 將

ie6中 li解析高度會多2px, 將 li 轉為塊元素,加宣告:display : block;

2)預設高度(ie6)

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

hack1:給元素新增宣告: font-size:0;      //前提是該塊元素裡沒有文字

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

hack3: 在元素中插入html注釋:

hack4:.在元素中插入html的空白符: 

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

描述:表單行高對其方式不一致

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

4)百分比bug

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

hack:給右邊的元素新增宣告:clear:right;   //清除右浮動。

clear:left;   //清除左浮動。

clear:both;   //清除兩邊浮動。

5) 透明屬性

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

相容其他瀏覽器寫法:opacity:value;(value 取值0~1,例如 0.1,0.2~0.9)

6)在ie6以及以下版本中,列表階梯bug

a)描述: 當li裡的元素a轉為塊元素時,並設定高度,在ie6以下會呈現li垂直效果

hack:如果想讓所有的列表在一行顯示,需要將li裡的a設定浮動即可。

b)描述:在給子元素使用float:left ,並且設定高度,父元素中設定浮動,會出現梯效果

hack:給父元素設定浮動

c)描述:li裡的a(ie7)以下出現行高不一致情況

hack1:給a加宣告 :  display:inline-block ;

hack2:給li 加float:left;並設li的寬度等於父元素

7)在ie6文字框會多解析1px;

hack1:相應的把文字框的高度設小1px;

8)在ie6中奇數寬高的bug

描述:ie6中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。

hack:要解決此類問題,只需要盡量將外部定位的div高寬寫成偶數即可。

9)ie6中鏈結的下方有間隙

ie6中的下方會存在一定的間隙,尤其在垂直挨著的時候,即可看到這樣的間隙。要解決此類問題,需要將img標籤定義為display:block 或定義vertical-align對應的屬性。也可以為img對應的樣式寫入font-size:0

10)在ie6中有時候寬度並沒有超出,但是會重複最後1個字的情況

hack1:刪除它周圍的注釋

hack2:在父級元素加上: display:inline;

hack3:去掉父級元素的寬度

hack4:在重複的元素後面新增

hack5:給文字外面套

hack6:清除浮動

11)在ie6中,dl中插入如果寬度不夠,最右邊的dl會被擠下去,

hack:在裡面在套用乙個

給其設定外面div的寬度+缺失的寬度,在給此div設定:overflow:hidden;

IE6不相容問題

一 選擇器相容問題 1.交集選擇器從ie7以上相容 div.special 2.兒子選擇器 ie7開始相容,ie6不相容。3.序選擇器 first child,last child,nth child 1 2n 2 ie8開始相容 選擇器 說ie6 層面相容的 標籤選擇器 id選擇器 類選擇器 後代...

有關IE6相容問題與解決

何為相容問題 所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。問題一 瀏覽...

IE6的一些相容問題

1 css相容問題 1 ie6不識別html5標籤 解決 引入html5shiv.js庫 2 ie6元素左右浮動,子元素設定高度後,父元素的浮動消失 解決 給子元素也加上浮動 3 ie6下第一塊元素浮動後,第二塊元素加的margin left值等於第一塊元素的寬度,會有間隙問題 解決 第二塊元素去掉...