網頁制作不得不知道的幾個技巧

2024-08-30 08:34:20

字體：大中小

來源：轉載

供稿：網友

一、 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.VeVb.com/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.VeVb.com/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.VeVb.com/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.VeVb.com/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,xiangrui09@qq.com" />
<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,xiangrui09@qq.com" />
<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,xiangrui09@qq.com" />
<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強制不換行屬性。