Category Archives: css

IE6、IE7的z-index bug

問題描述:

假設三個div, 依序為A、B、C,裡面個包一個div,分別為A1、B1、C1。如果設定position:absolute在A1跟C1上。且A1設定z-inde:2,C1設定z-index:1,在FF正常顯示下,A1會壓在C1之上。

但在IE6、IE7底下,當C1設定position之後。他們會自動給C一個z-index,且C因為排在A之後,所以C以內的區塊z-index永遠壓在A之上,不管A 或A以內的z-index正值設定多大都一樣。

解決方式:

  1. 把C設定z-index為負值。但這個作法有個很大的壞處,就是C裡面的超連結全部都會被遮蔽,以至於無法使用。
  2. 因為通常會出現這個問題,是在表頭的下拉選單會被底下的蓋住,所以更好的作法是表頭設定position:relative;並且加上z-index:2;或更大的數值,後面那個一定要加,不然一樣沒效。這樣底下的區塊超連結也會不被遮蔽。這個原理跟利用margin設定製作圖div覆蓋效果 所提到的是相同的。

CSS兩欄排版的問題

由於要做兩欄排版、且邊欄的高度要自動延伸的話,要在最外框的DIV使用overflow屬性。假如這時候在內容需要使用點選超連結移動到命名錨點時,會發現移動到命名錨點後,以上的內容不見了。不管使用哪一種瀏覽器都一樣。

這是因為overflow需要設定hidden所致。等於點到命名錨點的時候,不是整頁移動,而是只有子元素的內容移動,而超出父元素之外因為hidden的設定因此就被隱藏了。

但是為了要可以做成邊欄可延伸的排版,overflow此屬性不可能移除。因此解法是替需要點選超連結移動到命名錨點的頁面,加上網頁錨點平滑移動效果,就不會有內容不見得問題。

使用說明參考連結
http://www.webppd.com/thread-2709-1-1.html

平滑錨點移動效果demo
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

margin塌陷問題

狀況一:
在父元素div裡面的第一個子元素,如果有margin-top的時候,margin-top會被父元素的div搶走。最後一個子元素的margin-bottom也會被父元素的div搶走。

解法:有兩種,我是用把父元素的overflow設定成hidden的方式。另外看到有人說把子元素設定成inline-block也可以。可參考這篇。實作上,父元素如果設定float,也會避免掉這個問題。

狀況二:
兩個層級相同的子元素,上面的有margin-bottom,下面的有margin-top時。會有塌陷的問題,於是他們之間的間距不會是bottom+top,而是看誰大就用誰。

解法:這其實沒什麼特別解法,反正就是只用一邊的margin就好,比較單純。

利用margin設定製作圖div覆蓋效果

透過將margin設定為負值,並搭配postion:relative;與z-index可以控制同等級的div前後覆蓋的順序。要注意到的是子元素一定會蓋在父元素上,要相疊的兩個div層級要相同。預設在結構上排在越想被蓋在上面的div,只要設定relative,配合margin設定負值,加上z-index,就可以不使用絕對定位的調整div層疊的順序。

以下面這段原始碼為例子
<div id=”all”>
<div id=”a01″>
</div>
<div id=”a02″>
</div>
<div id=”a03″>
</div>
</div>

#a01~#a03是同等級的。
如果希望a03蓋在a02、a01之上,比較單純,因為a03在順序上排在比較下面,因此預設圖層順序排在比較上面,只要在a03設定以下屬性,就可以覆蓋在a02跟a01之上
#a03{
margin-top:-20px;}

如果希望a02蓋在a01 之上,那設定一樣。但是假設在排版上希望a02顯示在a01的上方,但是又希望a01在圖層順序上壓在a02之上的話要怎麼做呢?
#a01{
position:relative;}
這樣設定就可以了,如果有多層的話,就搭配z-index
#a01{
position:relative;
z-index:5;}

所有同層級的div,只要設定 position:relative; 就可以使用 z-index 決定看哪個div要壓在上面。所以有的定位可以用這個方法取代position:absolute;(因為據說畫面上用太多position:absolute; 有時候會造成奇怪的問題)

 

IE6使用fliter處理png後,連結無法點選的問題

參考文章:利用 AlphaImageLoader 解決 IE6 對 png 圖檔的透明問題

IE6底下使用png時,必須使用fiter的方式,png才能正常顯示不會出現醜醜的藍色。但是修正完畢後,如果裡面放了文字、連結、圖片等東西,會發現內容完全選不到,更不用說要點選連結,就好像內容被一個模包住碰不到一樣。

這個時候,就要用另外一個解法,把希望要被點選的東西再包到一個div內。然後在該div上(不是設定png背景圖的div,該div的子元素)加上position:relative;

結論:如果都要修,我寧可IE6不要用png,改用gif處理,會比較單純。因為這個修法要特別為IE6去改html。

包覆a標籤指定block屬性時,IE下寬度撐到100%的問題

這是發生在沒有放網站宣告的情況下,所有IE都會這樣。如果有放宣告,則只有IE6有此問題。

假設使用li包住a,
li有指定width、height、float,
而a有指定display:block,且有指定height但無指定width的情況下。
IE會出現該li撐滿一整行的狀況。
但只要把a的height拿掉,就不會撐滿一整行。

應該是不知道哪個屬性觸發了IE自己本身的haslayout

之前以為在IE底下必然會撐寬,所以只好把li指定寬度,
導致如果他的內容就是不確定有幾個字的時候,沒辦法自動變長。
解法是height不要設定,如果要把a的區塊高度撐高,改設定line-height、不要設定height即可,不過先決條件是原本文字就只有一行,如果多行就不適用此方法。

在firefox底下用css排版造成超連結失效的問題

這是在聯成上城邦企業包課的時候,學生遇到的問題。

學生遇到的問題,我總覺得這樣也很怪,但是我想不到要怎麼描述這個問題,所以沒有找到相關的文章說明,總之遇到了在這裡記錄一下找原因的過程,跟最後我自己硬給他的解釋(所以我也不確定是不是真的像我解釋這樣,總之下次遇到這樣的版型自己要注意一下)

這是同學遇到問題的版型,A跟B的區塊內都有很多的超連結,不知道為什麼在firefox底下,滑鼠移上去完全沒有出現手指頭,設定好的hover效果當然也沒有出現。但是IE看都正常。同學說家裡的firefox也正常,學校的就不正常,可是學校的ff比較新,然後我在mac上測試google瀏覽器看也不正常。

我先把整個css拿掉,發現一拿掉超連結就生效,所以很顯然不是結構不對造成的,接著我一個一個把css拿掉,看看到底卡在哪裡。

結果當A跟B的float屬性拿掉之後,超連結就好了。可是問題是要做成這樣的排版一定要用到float才能往下延伸,改用position設定就不適合了,顯然這不是一個好的解決方案。而且我也覺得float造成超連結失效很詭異,懷疑是不是因為float又跟其他屬性交互作用造成這個怪問題,所以就繼續找。

結果發現c區塊原本是position:relative,把的position刪掉或是改成absolute,或是把C區塊裡面的img拿掉(但是css不調整),超連結就神奇的好了。

這讓我覺得是C這個區塊造成上面兩大塊的超連結失效,那種感覺就像是C覆蓋住了A跟B,所以A跟B的連結才不能按,可是為什麼會蓋住?

後來只要把C區塊加上clear:both之後,A跟B區塊的超連結就正常了。

同學在做結構的時候A跟B並沒有用一個div包住,所以我的推論是由於A、B設定了float,加上C設定positon:relative,造成C在排版上正常應該會浮到最上面去(因為設定了float屬性後,底下div與前一個區塊的的相對位置就不是指到那個float的區塊,而是更前面沒有設定float的區塊),可是很巧的是同學在C裡面放了一個img,img跟其他行內元素很不一樣的是他是一個具有「實體」的行內元素,讓C這個div撐出了一個空間,變成在顯示上出現類似clear:both的效果。可是實際上他不是真的clear:both,所以img顯示上硬被擠到A、B兩個區塊底下,但是在ff的判讀上他會覺得是像下面這個

img讓C整個由最上面往下延伸。由於在結構上C排在A跟B之後,因此如果C由最上面往下伸展時,在層級上比A、B要後面,就彷彿在A、B上撲了一層透明膜,影響不只是對超連結,連帶在A、B兩區塊的字與圖都無法選取,在圖片上面按右鍵也會發現他不是出現跟圖片有關的選項,而是顯示網頁的相關選項。

因此在C上加上clear:both,才能夠真正消除C被前面A、B設定float所造成的定位問題做修正,進而解決超連結被「擋住」的問題。

在firefox3.X跟google瀏覽器看都是如此,我也不知道W3C他是怎麼解釋這部分…

在IE6下float導致文字消失

參考文章:【CSS】神奇IE6大bug,float导致文字消失

簡單來說,如果子元素設定float,但是父元素沒有指定寬。在IE6底下子元素的文字會神奇的消失。解法就是父元素要設定寬,但如果設定%,寬不能是100%,不然會引發別的IE6 bug。

另外一種狀況是:父元素有用到float,子元素就會不定期的出現文字消失、背景圖消失的狀況。可能是一開始開就不見,或是捲軸卷一卷就消失。

可使用以下方式試試看:
在會消失的該子元素上,加上_heigt:1%;
為什麼呢?不為什麼,用就對了…不要想跟IE6講道理啊傻孩子….