ie6下浮動使絕對定位元素莫名消失的問題

2021-09-22 07:10:55 字數 1464 閱讀 1080

這是我以前部落格裡寫的東西,現在搬過來和大家分享一下!

逐步解決遇到的各種bug,是web前端開發者逐步成長的過程!

今天在做專案時,遇到了ie6下絕對定位元素莫名消失的問題,在此寫個簡單的例子說明一下此類問題的解決辦法。

如果我們想得到如下效果該怎麼辦呢?

1   首先是基本的布局,此處不細說了。如果我們想讓最外面的框具有可擴充套件性,即紅色的框不設定高度,我們該怎麼辦呢?通常我  們有一下幾個辦法來解決浮動子標籤自動撐開父標籤高度的問題:

a 在子標籤最後加乙個清浮動的div。

b 父標籤css樣式新增。

d 給父標籤設定float屬性。(如果父標籤浮動了,可能對布局有影響,需要在父標籤外再套乙個讓整體居中的標籤。)

2  通常為了減少工作量,少敲幾個**,我都會選擇在父標籤css樣式中新增。但今天在做專案時,遇到了麻煩。首先看一下我最初的寫法。

我是蒙版層

看一下ie6下效果:

我們會發現蒙版層有一部分被遮住了,且ie6下紅色框的底部與裡面子元素的空隙也沒有了(非ie6中有),也就是說,子元素沒有把父元素的高度完全撐開。蒙版層被遮住是因為我們在父標籤css樣式中新增了。

為了解決這兩個問題,我就把父標籤css樣式刪除,並且在最後乙個子元素後面新增乙個div,

,clear的css樣式為.clear。此時神奇的ie6發揮它神奇的作用了:蒙版層消失了!!見圖:

此時chrome中的效果(正常顯示)如下:

為了解決這一問題,我在網上搜尋答案,原來這是乙個老bug了,大神們給出了答案:絕對定位的元素跟浮動的兄弟標籤之間插入乙個空的div標籤就ok了。至此需要解決的問題解決了。

總結來說,最好的解決方法就是

在最後加入乙個清浮動的div(css: .clear html:

),在絕對定位的元素和浮動元素間加入乙個空div。

有趣的現象

在寫這個例子的過程中,我發現了乙個

有趣的現象。如果我們給這個蒙版加個半透明的效果,css樣式如下:。當我們刪除以上所說的那個空div,定位的蒙版層依然存在。也就是說filter濾鏡起到了作用。

總之一句話:ie6很神奇,需要我們不斷的摸索。希望有一天,ie6能去找上帝玩!!

@挨踢前端

ie6下浮動使絕對定位元素莫名消失的問題

這是我以前部落格裡寫的東西,現在搬過來和大家分享一下!逐步解決遇到的各種bug,是web前端開發者逐步成長的過程!今天在做專案時,遇到了ie6下絕對定位元素莫名消失的問題,在此寫個簡單的例子說明一下此類問題的解決辦法。如果我們想得到如下效果該怎麼辦呢?1 首先是基本的布局,此處不細說了。如果我們想讓...

關於IE6下絕對定位元素莫名消失的問題

一般來說,讓絕對定位的元素不挨著浮動元素就ok了 1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6 7,ff中顯示一致 2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,有清除浮動時,ie6 7不顯示絕對定位層,ff顯示 3.當絕對定位層的鄰近浮動層的寬度等於父層寬度...

IE6中絕對定位元素消失問題

今天在做頁面的時候發現在ie6中絕對定位元素神秘消失了。下面是隨手寫的示例 在ie6中的顯示效果 在其它瀏覽器中的顯示效果 在藍色理想中有大神給出了以下解釋 1 當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6 7,ff中顯示一致 2 當絕對定位層的鄰近浮動層的寬度不等於父...