DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 網頁制作不得不知道的幾個技巧
網頁制作不得不知道的幾個技巧
編輯:前端技巧     

一、 IE6 下z-index無效。
在CSS中,通過z-index這個屬性改變層級,要讓z-index起作用有個前提,就是元素的position屬性要 是relative,absolute或是fixed。
z-index層級越高,內容越應該在上面顯示。在大部分的浏覽器在大部分的情況下,確實如此,但是不絕對,尤其遇到IE6。

1、關於效果截圖的些必要說明
下面的不是廢話,是為了更容易的理解我下面唾沫橫飛的內容。
以下所有結果截圖的大背景如下:
1、頁面上固定不動的,一成不變的,送豪宅也不會從良的是一個黑色背景,透明度40%,幾乎滿屏顯示的層級為1的絕對定位層。HTML為:
<div></div>
對應CSS為:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關系一目了然。看:
這說明內容在z-index為1的絕對定位層之下。

這說明內容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片,圖片在半透明黑色絕對定位層的上面還是下面很容易辨別,這樣,您就能夠對我所說的z-index不起作用有很直觀的認識了。
2、IE6的抱怨:浮動讓我沉淪
現在開始真正的講述問題的產生,原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個:1、父標簽 position屬性為relative;2、問題標簽無position屬性(不包括static);3、問題標簽含有浮動(float)屬性。
您可以拿下面的代碼自己做個簡單測試:
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.jb51.net/image/study/s/s256/mm2.jpg" />
</div>
丫的,這z-index都9999了,層級夠高吧,但是,看下面的圖:

這一對比就知道問題了,可能有人會疑問,這會不會是IE6的relative自己感冒了,而不是浮動(float)攜帶了“甲流病毒”。好,我現在去掉浮動,HTML代碼如下:
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm2.jpg" />
</div>
結果IE6下:
我想,問題應該都清楚了,至於原因,我起初以為是haslayout搞的鬼,後來,用zoom一測試,發現不是(IE7下無此bug也證明不是 haslayout的原因),似乎就是這個float會讓z-index失效。由於將外部div的position:relative屬性改為 absolute可以解決這一問題,我就懷疑是不是浮動讓relative發生了些變化,float與relative在水平定位上可以說是近親,會不會 是因為這兩者攪和在一起所以什麼“畸形”“體弱多病”就出現了。這僅是我的猜測而已,真正的原因還是去問IE6的後媽吧。
解決方法,解決方法有三,1、position:relative改為position:absolute;2、去除浮動;3、浮動元素添加position屬性(如relative,absolute等)。
3、固執的IE6:它只認第一個爸爸
可能不少人知道,這IE6下,層級的高低不僅要看自己,還要看自己的老爸這個後台是否夠硬。用術語具體描述為:
父標簽position屬性為relative或absolute時,子標簽的absolute屬性是相對於父標簽而言的。而在IE6下,層級的表現有時候不是看子標簽的z-index多高,而要看它們的父標簽的z-index誰高誰低。
有一定經驗的人可能都知道上面的事實。但是,相信這裡面很多人不知道IE6下,決定層級高低的不是當前的父標簽,而是整個DOM tree(節點樹)的第一個relative屬性的父標簽。有時平時我們多處理一個父標簽,z-index層級多而復雜的情況不多見,所以難免會有認識上 的小小偏差。
好,下面展示這個bug。
條件很簡單,只要絕對定位的第一個元素的第一個爸爸,或者說是最老的那個爸爸級別的人的relative屬性小於黑色半透明層的z-index層級。例如下面的HTML代碼:
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
可以看到,mm3圖片的父標簽div 是絕對定位,層級9999,比1大多了,絕對定位的父標簽層級1000(10000也一樣),也比黑色半透明層的z-index:1大多了,但是,我們可憐的IE6童鞋——
再看看以Firefox為代表的其他童鞋:
IE7與IE6有著同樣的bug,原因很簡單,雖然圖片所在div當前的老爸層級很高(1000),但是由於老爸的老爸不頂用,可憐了9999如此強勢的孩子沒有出頭之日啊!
知道原因解決就很輕松了,給第一任老爸添加z-index後的HTML代碼如下:
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.jb51.net/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
結果IE6童鞋喜笑顏開,春光燦爛:

二、css reset中的list-style:none
在日常工作中經常需要對ul,li進行css reset ,將列表符號隱藏.最常用的寫法就是Ul,li,ol{list-style:none;}(也有人用ul,li,ol{list-style-type:none;})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>常見的用法</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
這個頁面在IE6,7,8,FF中都沒什麼問題.
但是我們不能忽略的是,list-style: 包含了三個屬性: list-style-type,list-style-position,list-style-img
如果不注意這三個屬性的話,list-style有時候就會出來搗蛋
比如當ul,浮動後,需要display:inline 來解決在IE6中的雙倍邊距問題時,奇怪的事情發生了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>奇怪的事情發生了</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
上面的頁面在ie8,ff中仍然正常
但是在IE6,7中,ul內側與li產生了距離.
由此可見,當我們定義了list-style:none以後,盡管列表符並不出現,但是在IE6,7中,仍然留有它的位置.
看看在FF裡這個UL到底擁有哪些屬性

圖上可見,當css中定義list-style:none時,對list-style-position 並沒有影響,仍然是FF浏覽器的默認設置,值為outside
而IE6,7中很可能默認list-style-position:inside
為了證實這一點,我把list-style:none 換為list-style:none inside none再測試了一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>強制inside</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
<p>強制inside list-style:none inside none;</p>
<ul>
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>

運行後可以發現,在IE6,7中,與list-style:none的表現一模一樣.
所以我推測在IE6,7中當UL具有float:left和display:inline屬性後,設置了list-style:none,則list-style-position也默認為inside了;
所以我得出的總結是
在IE6,7下,當UL不具有float:left;display:inline;時:
無論有沒有list-style:none這個屬性,列表符都被隱藏,不占位置(下面代碼中的5,6)
當UL具有float:left;display:inline;屬性時
list-style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);(下面代碼中的 UL1,ul3)
未設置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)(代碼UL4)
而UL02 在參與測試的各浏覽器中表現都比較理想
最後這一段代碼對比一下各種情況下list-style的表現,尤其注意4,5,6在IE6,7下的表現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style:none還是list-style:none outside none;</title>
<style>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none outside none;}
.ul03,.ul03 li{list-style:none inside none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</style>
</head>
<body>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;未做css reset</p>
<ul class="ul04">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>5: 無 display,float屬性 list-style為none;</p>
<ul class="ul05">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>6: 無 display,float屬性 無list-style:none;</p>
<ul class="ul06">
<li><a href="#">純淨的文字 奇異的夢幻 奔騰的思想</a></li>
<li><a href="#">就像對愛情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園裡淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
通過上面代碼表現結果的對比,我認為:
在firefox中只要list-style-type為none ,則無論list-stype-position的值為outside或inside , list-style都能很好的被隱藏
而在IE6,7中,僅設置list-style:none,並不足以解決所有問題
所以我認為在css reset的時候使用 list-style:none outside none 更好
三、CSS強制不換行
在一個規定寬度大小的ul裡邊 我把li的寬度定義為自動。企圖讓li根據內容長度來自動向左對齊排列。
例如寬度為210px的ul裡 分別有4個li 這個4個li的寬度根據它們的自身內容長度為80px、120px、140px、80px。
我需要的效果是4個li向左自動排列。當第三個li和前兩個li的長度之和大於ul的寬度時候 第三個li則會下移一行。在第二行顯示。而不是把ul撐寬,或者是把自己撐高(內容換行,高度增加)
分別定義了ul的寬度210px和li的寬度自動,發現結果是:
ul並沒有被撐寬,可惜li也沒有自動到下一樣排列。而是內容換行,把li給撐高了。然後死皮賴臉的擠在了第一行。。
仔細考慮過之後認為問題出在li內部內容換行上。於是尋找禁止換行的css屬性。
解決方法:
給li加white-space:nowrap強制不換行屬性。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved