IE絕對定位元素始終被遮擋或者消失的解決方法
最近做一個下拉選單,當滑鼠懸停在主選單上,顯示下拉選單。ie8和FF都很正常,但是 ie6下拉選單內容始終被下邊的內容遮擋。
試了很多種解決辦法。發現原來是IE的bug。 解決方法如下:
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,可以衝破父級顯示
看下面的程式碼:
複製程式碼程式碼如下:
<div style="position:relative; background:#FF0000; width:200px; height:100px;">
<div style="position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100"></div>
</div>
<div style="position:relative; background:#000000; width:200px; height:100px;"></div>
<div style="position:relative; background:#9900FF; width:200px; height:100px;"></div>
程式碼解釋:上面是三個相鄰的相對定位的層,在第一個層里加了個相對其絕對定位的層,按照理論,這個絕對定位的元素是在三個相對定位元素之上的,但是,實際卻沒有顯示。嘗試設定z-index值也沒有效。
網上解決這個bug的辦法一般用hack使B為負值,來降低 B 在IE下級別
但是這種方法在z-index為負值時,產生了新的ie bug
按照定位的特性,ie的這個bug是可以迴避的
從表面上看 下面的層 遮住了上面的絕對定位層,實際上是下面的 層遮住了絕對定位的的父級層,只要將 該父級層 的z-index設定大於後面的層即可
相關推薦
IE絕對定位元素始終被遮擋或者消失的解決方法
最近做一個下拉選單,當滑鼠懸停在主選單上,顯示下拉選單。ie8和FF都很正常,但是 ie6下拉選單內容始終被下邊的內容遮擋。 試了很多種解決辦法。發現原來是IE的bug。 解決方法如下: 1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,IE6/7,FF
小tip: margin:auto實現絕對定位元素的水平垂直居中
實現 可用 偏移 css代碼 百度 add 包含塊 統計 ica 轉載自:http://www.zhangxinxu.com/wordpress/?p=3794 一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裏已經有答案了。 兼容性不
總結一下各種居中(內聯元素、塊級元素、浮動元素、絕對定位元素)*(水平、垂直)
一個 常見 一是 -a flex 樣式 有一個 margin round 在平時寫網頁樣式的時候,元素居中應該是最常見不過的了,在這裏我們把常見居中的情況簡單總結一下。本文討論以下幾種情況:內聯元素、塊級元素、浮動元素、絕對定位元素。居中的情況分兩種情況:水平居中和垂直
table中絕對定位元素相對td定位失效解決方案
targe 項目 定位元素 .html 完美 cnblogs posit chrom 並且 在一個table中,我需要在td裏面絕對定位一個div, 寫法:td{position:relative;} div{position:absolute;} OK,就這麽簡單,
關於又見絕對定位元素受限於父容器寬度的問題
再一次的發現了這個問題,無論是絕對定位元素還是浮動元素,他們有一個特性:受限於父容器的寬度? 這是父容器li標籤屬性: 再來就是子容器了,在li標籤裡面套上了一層ul標籤,要做出效果,那麼使用了絕對定位? 預設寬度為3個子li標籤的寬度之和:屬性: 那麼開始操作了,
css3 讓絕對定位元素水平居中的方法
一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。 相容性不錯的主流用法是: 1 2 3 4 5 6 .element { width: 600px; height: 400px; po
絕對定位元素設定水平居中
需求:有時頁面內的一些容器需要定位在特定的某個位置,但是需要容器在水平方向上面居中顯示,比如頁面內的一個背景圖裡面放置一個容器,使用margin-top不方便,就決定使用絕對定位來設定。 實現方法: 方法一、知道容器尺寸的前提下 .element { width: 600px;
塊狀元素居中/浮動元素居中/絕對定位元素居中/內容居中
1、塊狀元素水平居中: margin-left=auto;margin-right=auto; 2、浮動塊狀元素水平居中: 外包裝塊“float:left;position:relative;left:50%”; 內部塊“float:left;position:relati
絕對定位元素的水平垂直居中
二、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。 相容性不錯的主流用法是: .element { width: 600px; height: 400px; position: absolute; left
IE5、6下絕對定位元素和浮動元素並列,絕對定位元素消失不見解決方案
浮動元素和絕對定位元素是同級的話,絕對定位元素就會消失,所以咱們只要讓他們兩個不處於同級就可以避免這個BUG <!DOCTYPE html> <html lang="en">
解決CSS垂直居中的幾種方法(基於絕對定位,基於視口單位,Flexbox方法)
在CSS中對元素進行水平居中是非常簡單的:如果它是一個行內元素,就對它的父元素應用 text-align: center ;如果它是一個塊級元素,就對它自身應用 margin: aut
ie7,ie8下 使用絕對定位的a標籤點選失效解決辦法
今天無意間發現一個使用絕對定位的a標籤在ie7,ie8下點選失效解決辦法,查了一下原來竟是醬紫的,又get到了一個新的技能。 以下是問題解決的辦法: 這種時候有兩種解決方法(主要是針對a標籤不能設定背景情況): 1、給a標籤新增樣式:background:url(ab
ubuntu下/boot空間被占滿的解決方法
image strong 釋放 方法 網上 目錄 init election dpkg 我這個方法是直接刪除或移除的方法,網上有采用 查看dpkg --get-selections|grep linux 安裝的內核包 然後卸載不需要的內核 sudo apt-get remo
下拉列表被flash覆蓋的解決方法
blog har 一個 install ogl flash asp mode .aspx 做鼎聞有一段時間了,有的banner輪播圖的地方用flash替換的時候,就會導致上面的導航條下拉列表被flash覆蓋,找了一段時間沒有得到有效的解決方法,後來知道關鍵是flash的這一
win7查看某個端口被占用的解決方法
標示 AS 查看 方法 繼續 所有 解決方法 findstr exe 1.開始---->運行---->cmd,或者是window+R組合鍵,調出命令窗口。 2.輸入命令:netstat -ano,列出所有端口的情況。在列表中我們觀察被占用的端口,比如是49157
爬蟲IP被禁的簡單解決方法
clas rate HR useragent agents 時間 tst 代理服務器 github 爬蟲以前聽上去好厲害好神秘的樣子,用好了可以成就像Google、百度這樣的索索引擎,用不好可以憑借不恰當的高並發分分鐘崩掉一個小型網站。寫到這裏想到12306每年扛住的並發請
網站被掛馬的解決方法與分析如何會被掛馬
運用 都沒有 使用 註意 In ext 一段 ××× 其他 如今絕大多數站長都在想著怎麽建設外鏈,怎麽發布網站內容,把自己網站的弄到首頁或是前三位,網站被掛馬的安全其實也需要站長們註意,因為一旦網站安全出了問題,網站的排名也會受到很大的影響。下面就仔細分析幾種關於網站安全的
爬蟲IP被禁的簡單解決方法——切換UserAgent
-a ref 技術分享 blank bsp target log AS In 【轉載】Python爬蟲之UserAgent 用到的庫 https://github.com/hellysmile/fake-useragent 爬蟲IP被禁的簡單解決方法——切換User
MVC的view頁面內嵌C#語法發現路徑被轉碼的解決方法
ima str htm com view col .com img ole 一,上視圖代碼,如下 console.log(‘@urlquery.ToString()‘); console.log(‘@Html.Raw(urlquery.ToString())‘); 二,
php ajax提交post請求出現陣列被截斷情況的解決方法
一、場景 今天做儲存專題商品列表的時候發現,前端明明有2300多條資料,但是實際服務端接受存入資料庫才166條 二、解決過程 經過除錯發現前端頁面提交post請求時資料量是正確的,但到服務端只能接受到166條。 一開始以為是post請求長度超過限制,不過看了下請求內容才200多K