標籤彙整:css

包覆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講道理啊傻孩子….

css box的高度延伸

如果有一個box,希望他在內容少的時候可以有一個指定高度,但是內容多的時候,高度可以自由延伸的話。IE6與其他瀏覽器(含IE7以上版本)要分開設定

IE6設定:直接指定height就好,因為IE6預設如果內容超過設定高度,會自動撐高(在沒有設定overflow:hidden的情況底下。)

其他瀏覽器設定:使用min-height指定最小高度

css float與positon相關問題

1.IE7、IE8、FF、safari….
position設定為absolute時,
上下左右四邊計算位置的邊際,是以margin推出去後的上下左右位置作為邊界

2.IE6
子元素設定為float,如果父元素沒有指定寬度時,父元素的高度不會自動被撐高。
但是只要父元素有指定寬度,則父元素高度就會自動撐高
如果想在不指定寬度的情況下讓父元素撐高,
則必須替IE6補丁做一個高
_height:1%;
簡單來講就是指定一個高度,然後因為IE的特性就是有指定高度,會觸發haslayout,
因此內容超過的時候會自動將父元素撐高。
利用這點讓IE6的高度抵消掉float元素造成的無法撐高父元素的問題。

其他瀏覽器
子元素設定為float,父元素不管有沒有指定寬度,父元素都不會自動被撐高,
必須在父元素加上overflow:auto才能解。

(適用所有瀏覽器)
父元素與子元素都有設定float時,會把子元素設定float無法把父元素撐高的問題抵消掉。也就是說如果子元素跟父元素都有設定float為left或right的話,在所有瀏覽器呈現都會顯示父元素被撐高。但是這種設定方法的問題點在於設定float之後位置會移動。個人認為不是一個很好的解法,分IE6跟其他瀏覽器,一個用寬度指定或高度補丁,一個用父元素設定overflow在邏輯上會比較好記一點。如果真的要用float去抵消子元素float造成的無法撐高問題,那父元素就必須增加width跟clear,免得底下的元素又浮上來。但是使用float有一個好處是如果子元素設定負值的margin,假設設定overflow該子元素會被隱藏。但如果用float的方式就不會被隱藏。

inline、block與inline-block比較

參考文章:標籤的結構區塊與行內display:inline-block的深入理解

先來說inline跟block,在原本html標籤,標籤本身可分為行內元素(inline)與區塊元素(block)。以下是行內元素跟區塊元素簡單的比較

區塊元素:

  1. h1~h6、p、ol、li….等等在輸入時,會佔用一整行的標籤,都屬於區塊元素。
  2. 可設定width、height、padding、margin等盒狀模型可描述的屬性

行內元素:

  1. span、em、strong、img 等等在輸入時,會跟旁邊的內文並排者,都屬於行內元素
  2. 設定盒狀模型屬性會無效,除非使用display轉換成block才可使用

參考文章內提到區塊元素內可包含多個區塊與行內元素,但行內元素內不可包含區塊元素。這點我比較不清楚,但在實作上我曾經使用<a>包住<div>,是可用的。會這樣包是因為有排版上的考量,但通常這樣包的時候,a也會轉換成block。

再來說inline-block,這個是css屬性中display的參數。意思是排版使用inline的方式,但是維持block的特性。排版使用inline代表可以左右排排站。這樣就可以不用使用float來做。firefox 4以上、google瀏覽器有支援此屬性,但IE不支援。

我原本以為IE7以下支援,後來才知道是因為我設定了別的屬性(例如height)觸發了IE的haslayout。然後IE7以下會把inline-block辨識為inline。(阿既然這樣就設inline就好咩….在IE底下神奇的是設定inline的話,還是可以對該元素設定寬高喔。所以「感覺」就像inline-block設定有生效)。IE8以上就有支援這個屬性了。

input隱形按鈕在IE6的問題與解決方法

有時候版面設計會把按鈕作成圖片、而且讓造型上跟輸入欄結合在一起。這時候我通常會用比較偷懶的方法:把輸入欄、按鈕切成同一張圖。然後把輸入欄跟按鈕的input用隱形的方式壓在圖片上。

輸入欄的部份隱形沒有問題,但是input按鈕隱形的時候,在IE6會有問題,最近剛好碰到兩次,寫一下原本的作法跟解決方法。

如果不考慮IE6,IE7以上以及非IE瀏覽器可以用下面這段css把input變成隱形按鈕
<input type=”submit” name=”button” id=”button” value=”送出” />

#button{
width:10px; // 因為要隱形、要自訂寬
height:10px; // 因為要隱形、要自訂高
text-indent:-300px; //讓按鈕裡面的字超出按鈕範圍之外
overflow:hidden; //將超出範圍的字隱藏
border:none; //把按鈕框隱藏
background:transparent; //把背景變透明
}

但是在IE6下,只要把按鈕背景變透明,就只有按到字的時候,才能按到按鈕,偏偏我又設定把字也隱藏了,所以根本按不到。這個時候有兩種解法

解法一:把原本放input的位子改成放一張透明的gif,在該gif上下超連結
解法二:把<input type=”submit” name=”button” id=”button” value=”送出” />改成<input type=”image” src=”透明圖片gif的路徑” name=”button” id=”button” value=”送出” />

我第二次遇到的時候實際上還碰到另外一個狀況,就是該父元素的bg是用png,在ie6底下用fliter的方式修復。但是造成按鈕無法按,父元素加了position:relative;還是無效。所以後來只好針對ie6用gif圖檔背景,然後配合上述修改才處理掉按鈕在ie6無法按到的問題。

UL、OL在Firefox和IE下的差異

參考文章:UL在Firefox和IE下的不同表現

詳細的內容直接看參考文章囉。
簡單來說,ul、ol在firefox跟ie底下的預設值不同。在firefox預設有padding沒margin。在IE預設有margin沒padding。

我覺得要個別處理很麻煩,所以通常都會導入一個reset.css。在裡面把大部份預設有margin、padding的元素(例如body、h1~h6、p、ul、ol)直接都設定為0。有需要的時候才手動給值。這樣比較單純。

條件注釋相關說明

參考文章:關于條件注釋的幾個實例代碼

如果要針對IE6、IE7、IE8下不同的css,有很多種方法,目前我是用特殊字元的方式(在樣式前面加上*、_、 或尾巴加\8)。因為做起來最省事。但是這種作法的缺點是無法通過W3C CSS驗證

那如果想要通過驗證,就得用【條件注釋】的方法來做。

應用方式如下
<link rel=”stylesheet” media=”all” type=”text/css” href=”style.css” />
<!–[if lte IE 6]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie6.css” />
<![endif]–>
<!–[if lte IE 7]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie7.css” />
<![endif]–>
<!–[if lte IE 8]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie8.css” />
<![endif]–>

因為條件注釋只有IE看的懂,所以別的瀏覽器不會讀後面的那些樣式檔。