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

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

逐步解決遇到的各種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 當絕對定位層的鄰近浮動層的寬度不等於父...