在進行網頁布局的時候,經常會根據需要設定相對,絕對以及浮動定位;
發現了乙個奇妙的現象:
1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,ie6/7,ff中顯示一致;
2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,有清除浮動時,ie6/7不顯示絕對定位層,ff顯示;
3.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,以及沒有清除浮動時,ie6不顯示絕對定位層,ie7/ff顯示;
4.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,有清除浮動時,ie6/7不顯示絕對定位層,ff顯示;
要解決這個bug的方法也很簡單,讓絕對定位層不挨著浮動層放置就好了,還有個更簡單的方法,在絕對定位元素和其他元素之間加乙個空白的div。
再來看看絕對定位元素神秘消失被遮擋的現象
先了解一下所涉及到的幾個定位特性:
1. 相對定位元素預設的z-index的數值是0。
2. 當兩個相對定位同時出現時,**靠後的z-index優先。
3. 子級遵循父級設定的z-index;如果子級設定了絕對定位、z-index,可以衝破父級顯示
看下面的**:
view source
print?
1
<
div
style
=
"position:relative; background:#ff0000; width:200px; height:100px;"
>
2
<
div
style
=
"position:absolute; background:#ffff00; width:49px; height:50px; left:106px; top:310px; z-index:100"
>
3
4
<
div
style
=
"position:relative; background:#000000; width:200px; height:100px;"
>
5
<
div
style
=
"position:relative; background:#9900ff; width:200px; height:100px;"
>
**解釋:上面是三個相鄰的相對定位的層,在第乙個層裡加了個相對其絕對定位的層,按照理論,這個絕對定位的元素是在三個相對定位元素之上的,但是,實際卻沒有顯示。嘗試設定z-index值也沒有效。
網上解決這個bug的辦法一般用hack使b為負值,來降低 b 在ie下級別
但是這種方法在z-index為負值時,產生了新的ie bug
按照定位的特性,ie的這個bug是可以迴避的
從表面上看 下面的層 遮住了上面的絕對定位層,實際上是下面的 層遮住了絕對定位的的父級層,只要將 該父級層 的z-index設定大於後面的層即可
收集一些關於IE的BUG
收集摘錄了一些bug雖然是遠古瀏覽器,還是得注意一下吧 ie6中雙邊距bug 發生場合 當浮動元素 浮動後預設為block級元素 的浮動方向和margin方向相同時產生。解決方法 給浮動元素加上display inline css屬性 或者用padding left代替margin left。總之是...
整理的一些Bug
前言 最近在學c 因為公司要求,以前從沒接觸過c 但是來到這個公司公司的人要我負責c 的乙個工程,所以沒辦法,學唄,難道不是很難,現在的學習環境也很好,直接就上專案,這樣學起來會很快,這篇部落格是將我所遇到的一些bug整理一下,以回顧回顧。1.無法顯示額外的 分析警告或錯誤 在使用vs2005編譯程...
IE6的一些BUG及解決方案
無標題文件 title style type text css style head body p begin p p 這是為了增加高度 p p 這是為了增加高度 p p 這是為了增加高度 p p 這是為了增加高度 p p 這是為了增加高度 p p 這是為了增加高度 p p 這是為了增加高度 p p...