溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)網(wǎng)頁(yè)制作不得不知道的技巧有什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
一、 IE6 下z-index無(wú)效。
在CSS中，通過(guò)z-index這個(gè)屬性改變層級(jí)，要讓z-index起作用有個(gè)前提，就是元素的position屬性要 是relative，absolute或是fixed。
z-index層級(jí)越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實(shí)如此，但是不絕對(duì)，尤其遇到IE6。
1、關(guān)于效果截圖的些必要說(shuō)明
下面的不是廢話(huà)，是為了更容易的理解我下面唾沫橫飛的內(nèi)容。
以下所有結(jié)果截圖的大背景如下：
1、頁(yè)面上固定不動(dòng)的，一成不變的，送豪宅也不會(huì)從良的是一個(gè)黑色背景，透明度40%，幾乎滿(mǎn)屏顯示的層級(jí)為1的絕對(duì)定位層。HTML為：
<div></div>
對(duì)應(yīng)CSS為：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級(jí)關(guān)系一目了然?？矗?
這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之下。
這說(shuō)明內(nèi)容在z-index為1的絕對(duì)定位層之上。
2、頁(yè)面上做對(duì)比的是美女圖片，圖片在半透明黑色絕對(duì)定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜f(shuō)的z-index不起作用有很直觀的認(rèn)識(shí)了。
2、IE6的抱怨：浮動(dòng)讓我沉淪
現(xiàn)在開(kāi)始真正的講述問(wèn)題的產(chǎn)生，原因以及解決了。首先講講第一種z-index無(wú)論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個(gè)：1、父標(biāo)簽 position屬性為relative；2、問(wèn)題標(biāo)簽無(wú)position屬性（不包括static）；3、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。
您可以拿下面的代碼自己做個(gè)簡(jiǎn)單測(cè)試：
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="https://cache.yisu.com/upload/information/20210311/298/10186.jpg" />
</div>
丫的，這z-index都9999了，層級(jí)夠高吧，但是，看下面的圖：
這一對(duì)比就知道問(wèn)題了，可能有人會(huì)疑問(wèn)，這會(huì)不會(huì)是IE6的relative自己感冒了，而不是浮動(dòng)(float)攜帶了“甲流病毒”。好，我現(xiàn)在去掉浮動(dòng)，HTML代碼如下：
<div></div>
<div style="position:relative; z-index:9999;">
<img src="https://cache.yisu.com/upload/information/20210311/298/10186.jpg" />
</div>
結(jié)果IE6下：
我想，問(wèn)題應(yīng)該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來(lái)，用zoom一測(cè)試，發(fā)現(xiàn)不是（IE7下無(wú)此bug也證明不是 haslayout的原因），似乎就是這個(gè)float會(huì)讓z-index失效。由于將外部div的position:relative屬性改為 absolute可以解決這一問(wèn)題，我就懷疑是不是浮動(dòng)讓relative發(fā)生了些變化，float與relative在水平定位上可以說(shuō)是近親，會(huì)不會(huì) 是因?yàn)檫@兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測(cè)而已，真正的原因還是去問(wèn)IE6的后媽吧。
解決方法，解決方法有三，1、position:relative改為position:absolute；2、去除浮動(dòng)；3、浮動(dòng)元素添加position屬性（如relative，absolute等）。
3、固執(zhí)的IE6：它只認(rèn)第一個(gè)爸爸
可能不少人知道，這IE6下，層級(jí)的高低不僅要看自己，還要看自己的老爸這個(gè)后臺(tái)是否夠硬。用術(shù)語(yǔ)具體描述為：
父標(biāo)簽position屬性為relative或absolute時(shí)，子標(biāo)簽的absolute屬性是相對(duì)于父標(biāo)簽而言的。而在IE6下，層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看它們的父標(biāo)簽的z-index誰(shuí)高誰(shuí)低。
有一定經(jīng)驗(yàn)的人可能都知道上面的事實(shí)。但是，相信這里面很多人不知道IE6下，決定層級(jí)高低的不是當(dāng)前的父標(biāo)簽，而是整個(gè)DOM tree（節(jié)點(diǎn)樹(shù)）的第一個(gè)relative屬性的父標(biāo)簽。有時(shí)平時(shí)我們多處理一個(gè)父標(biāo)簽，z-index層級(jí)多而復(fù)雜的情況不多見(jiàn)，所以難免會(huì)有認(rèn)識(shí)上 的小小偏差。
好，下面展示這個(gè)bug。
條件很簡(jiǎn)單，只要絕對(duì)定位的第一個(gè)元素的第一個(gè)爸爸，或者說(shuō)是最老的那個(gè)爸爸級(jí)別的人的relative屬性小于黑色半透明層的z-index層級(jí)。例如下面的HTML代碼：
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="https://cache.yisu.com/upload/information/20210311/298/10187.jpg" />
</div>
</div>
</div>
可以看到，mm3圖片的父標(biāo)簽div 是絕對(duì)定位，層級(jí)9999，比1大多了，絕對(duì)定位的父標(biāo)簽層級(jí)1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可憐的IE6童鞋——
再看看以Firefox為代表的其他童鞋：
IE7與IE6有著同樣的bug，原因很簡(jiǎn)單，雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000)，但是由于老爸的老爸不頂用，可憐了9999如此強(qiáng)勢(shì)的孩子沒(méi)有出頭之日啊！
知道原因解決就很輕松了，給第一任老爸添加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="https://cache.yisu.com/upload/information/20210311/298/10187.jpg" />
</div>
</div>
</div>
結(jié)果IE6童鞋喜笑顏開(kāi)，春光燦爛：
二、css reset中的list-style:none
在日常工作中經(jīng)常需要對(duì)ul,li進(jìn)行css reset ,將列表符號(hào)隱藏.最常用的寫(xiě)法就是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>常見(jiàn)的用法</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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
這個(gè)頁(yè)面在IE6,7,8,FF中都沒(méi)什么問(wèn)題.
但是我們不能忽略的是,list-style: 包含了三個(gè)屬性: list-style-type，list-style-position，list-style-img
如果不注意這三個(gè)屬性的話(huà),list-style有時(shí)候就會(huì)出來(lái)?yè)v蛋
比如當(dāng)ul,浮動(dòng)后,需要display:inline 來(lái)解決在IE6中的雙倍邊距問(wèn)題時(shí),奇怪的事情發(fā)生了:
<!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>奇怪的事情發(fā)生了</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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
上面的頁(yè)面在ie8,ff中仍然正常
但是在IE6,7中,ul內(nèi)側(cè)與li產(chǎn)生了距離.
由此可見(jiàn),當(dāng)我們定義了list-style:none以后,盡管列表符并不出現(xiàn),但是在IE6,7中,仍然留有它的位置.
看看在FF里這個(gè)UL到底擁有哪些屬性
圖上可見(jiàn),當(dāng)css中定義list-style:none時(shí),對(duì)list-style-position 并沒(méi)有影響,仍然是FF瀏覽器的默認(rèn)設(shè)置,值為outside
而IE6,7中很可能默認(rèn)list-style-position:inside
為了證實(shí)這一點(diǎn),我把list-style:none 換為list-style:none inside none再測(cè)試了一下
<!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>強(qiáng)制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>強(qiáng)制inside list-style:none inside none;</p>
<ul>
<li><a href="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
運(yùn)行后可以發(fā)現(xiàn),在IE6,7中,與list-style:none的表現(xiàn)一模一樣.
所以我推測(cè)在IE6,7中當(dāng)UL具有float:left和display:inline屬性后,設(shè)置了list-style:none,則list-style-position也默認(rèn)為inside了;
所以我得出的總結(jié)是
在IE6,7下,當(dāng)UL不具有float:left;display:inline;時(shí):
無(wú)論有沒(méi)有l(wèi)ist-style:none這個(gè)屬性,列表符都被隱藏,不占位置(下面代碼中的5,6)
當(dāng)UL具有float:left;display:inline;屬性時(shí)
list-style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);(下面代碼中的 UL1,ul3)
未設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)(代碼UL4)
而UL02 在參與測(cè)試的各瀏覽器中表現(xiàn)都比較理想
最后這一段代碼對(duì)比一下各種情況下list-style的表現(xiàn),尤其注意4,5,6在IE6,7下的表現(xiàn)
<!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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</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="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>5: 無(wú) display,float屬性 list-style為none;</p>
<ul class="ul05">
<li><a href="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
<div>
<p>6: 無(wú) display,float屬性 無(wú)list-style:none;</p>
<ul class="ul06">
<li><a href="#">純凈的文字 奇異的夢(mèng)幻 奔騰的思想</a></li>
<li><a href="#">就像對(duì)愛(ài)情一樣 要求是近乎完美的</a></li>
<li><a href="#">校園里淡淡的青春 單純的男孩女孩</a></li>
</ul>
</div>
</body>
</html>
通過(guò)上面代碼表現(xiàn)結(jié)果的對(duì)比,我認(rèn)為:
在firefox中只要list-style-type為none ,則無(wú)論list-stype-position的值為outside或inside , list-style都能很好的被隱藏
而在IE6,7中,僅設(shè)置list-style:none,并不足以解決所有問(wèn)題
所以我認(rèn)為在css reset的時(shí)候使用 list-style:none outside none 更好
三、CSS強(qiáng)制不換行
在一個(gè)規(guī)定寬度大小的ul里邊 我把li的寬度定義為自動(dòng)。企圖讓li根據(jù)內(nèi)容長(zhǎng)度來(lái)自動(dòng)向左對(duì)齊排列。
例如寬度為210px的ul里 分別有4個(gè)li 這個(gè)4個(gè)li的寬度根據(jù)它們的自身內(nèi)容長(zhǎng)度為80px、120px、140px、80px。
我需要的效果是4個(gè)li向左自動(dòng)排列。當(dāng)?shù)谌齻€(gè)li和前兩個(gè)li的長(zhǎng)度之和大于ul的寬度時(shí)候 第三個(gè)li則會(huì)下移一行。在第二行顯示。而不是把ul撐寬，或者是把自己撐高（內(nèi)容換行，高度增加）
分別定義了ul的寬度210px和li的寬度自動(dòng)，發(fā)現(xiàn)結(jié)果是：
ul并沒(méi)有被撐寬，可惜li也沒(méi)有自動(dòng)到下一樣排列。而是內(nèi)容換行，把li給撐高了。然后死皮賴(lài)臉的擠在了第一行。。
仔細(xì)考慮過(guò)之后認(rèn)為問(wèn)題出在li內(nèi)部?jī)?nèi)容換行上。于是尋找禁止換行的css屬性。
解決方法：
給li加white-space:nowrap強(qiáng)制不換行屬性。
看完上述內(nèi)容，你們對(duì)網(wǎng)頁(yè)制作不得不知道的技巧有什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
