IE下css常見問題總結及解決

2021-08-19 17:01:36 字數 2843 閱讀 9043

**

本文整理了ie中div的垂直居中問題、margin加倍的問題、ie6下頁面min-width/height與max-width/height問題、ie6 3px bug及ie6捉迷藏的問題等等,感興趣的朋友可以參考下哈

1、div的垂直居中問題:

解決方法:將行距增加到和整個div一樣高:

複製**

**如下:

div 

test

2、margin加倍的問題:

ie6下,div設定為float時,左(右)margin會加倍。

解決方法:在這個div裡面加上display:inline; 例如:

3、ie6下頁面min-width/height與max-width/height問題:

ie6無法識別max- 和min-,可以用表示式解決這一問題,例如: 

1)當浮動元素與非浮動元素相鄰時,會出現3px畫素空隙,例如: 

解決方法:給非浮動的元素新增浮動屬性,即可解決這個問題(.right新增float:left;)。 

2)div包含img時,底部會出現留白,例如:

解決方法:a、dom結構調整為:

b、設定img元素display: block; (img 預設為inline元素)

5、ie6捉迷藏的問題:(參考            

當div應用稍顯複雜時,常常出現的情況是在用於版式布局時,有時當製作乙個左右兩欄的網頁,而每個欄中又有一些鏈結、div等,這個時候容易引發捉迷藏問題。即有些內容無法顯示,而當滑鼠選擇此區域時,發現內容是確實存在的,例如:

解決方法:

1):在對頁面上的物件使用float浮動之後,最後在下面使用帶有clear:both;的div對頁面上進行一些浮動上的清理工作,並且盡量避免對.layout使用background。去掉.layout的background後可以正常顯示。

2):給.layout使用固定寬和高,儘管這樣會對頁面有所限制,但能消除一些捉迷藏的影響。給.layout新增width: 500px; height: 300px;,右側內容可以正常顯示。

3):給.layout和.left新增position:relative;後頁面內容可以正常顯示.

4):對.layout使用line-height屬性,強制瀏覽器對其中的內容進行行距調整,從而可以消除捉迷藏bug。例如新增line-height:1;右側內容就可以正常顯示。

捉迷藏bug雖然是ie留下的後遺症,但是我們應當在div的巢狀上遵循一些習慣,盡量使用最少的層次巢狀來滿足頁面設計需要,使頁面結構簡單、實用、易控制與管理,盡可能的減少由於不必要的巢狀引來的連鎖問題。 

6、父div高度自適應失效問題:

div巢狀時,當子div設定浮動屬性後,其父div的高度自適應失效了。例如:

解決方法:

1)向父div的末尾再插入乙個額外的標籤,並令其清除浮動(clear)以撐大父容器。這種方法瀏覽器相容性好,但需要新增額外的而且通常是無語義的標籤。這種方法是w3c推薦的方法。

2)使用after偽類(ie6/7不支援after偽類):

這種方法就是對父容器使用after偽類和內容宣告在指定的現在內容末尾新增新的內容。經常的做法就   是新增乙個「點」,因為它比較小不太引人注意。然後我們再利用它來清除浮動(閉合浮動元素),並隱藏這個內容 #outer:after

複製**

**如下:

3) 在父div中使用overflow屬性,並設定為hidden或者auto,可以在標準相容瀏覽器中閉合(清除)浮動元素,為了相容ie6可以寫成如下形式:

4)浮動父元素,float-in-float:這種做法就是讓父容器也浮動,這利用到了浮動元素的乙個特性——浮動元素會閉合浮動元素。這種方式在ie和標準相容瀏覽器中都有較好的效果,但在實際編寫中,父div不是隨意就可浮動的,有可能造成更多問題,因此一般不採用此法。 

7、定義1px高度容器問題:

ie6下無法定義1px高度的容器,例如: 

解決方法:

1)加overflow: hidden;

2)加zoom: 0.08;

IE下css常見問題總結及解決

1 div的垂直居中問題 解決方法 將行距增加到和整個div一樣高 複製 如下 div test 2 margin加倍的問題 ie6下,div設定為float時,左 右 margin會加倍。解決方法 在這個div裡面加上display inline 例如 3 ie6下頁面min width heig...

CSS總結及常見問題彙總

最近在學習html和css的一些基本應用,遇到過很多問題,剛開始會發現css像是不可控一樣,這次達到了預期效果,可能下一次就偏了十萬八千里,或者是 牽一髮而動全身 其實對於計算機而言,沒有什麼是不確定的,如果有,那一定是學藝不精。以下是自己在學習過程中對css的一些總結。css,cascading ...

css常見問題及技巧

1.父級元素如已經設定成了塊級元素 display block 子元素如 設定了float,這時父元素a依然無高度沒有被撐開 解決 在元素的樣式中新增overflow hidden 2.查詢功能 media screen and min width 1280px 這樣書寫瀏覽器可能不會解析成功,an...