1.ie8下兼容問(wèn)題，這個(gè)最好處理，轉(zhuǎn)化成ie7兼容就可以。在頭部加如下一段代碼，然后只要在ie7下兼容了，ie8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />
2.flaot浮動(dòng)造成ie6下面雙倍邊距問(wèn)題，這個(gè)最常見(jiàn)，也最好處理，!important解決，比如
margin-left:10px !important;/*ie7,ie8,ff下是10px*/;
margin-left:5px;/*ie6下屬性寫(xiě)的是5px，但在顯示出來(lái)的是10px
3.清除塊display，這個(gè)可以解決浮動(dòng)造成的塊，造成塊后，當(dāng)div背景填色或填圖片的時(shí)候，會(huì)出現(xiàn)背景斷開(kāi)或差一小塊。這種兼容出現(xiàn)的不太多，我做到現(xiàn)在，只遇到過(guò)兩次，方法是在出現(xiàn)兼容的div的css中寫(xiě)一個(gè)display:block，或其它屬性，中文什么意思我不知道，我英語(yǔ)差，但能達(dá)到想要的效果，6 e" z e% |8 g# |
4.很多朋友div css的時(shí)候，會(huì)出現(xiàn)，在ie的幾個(gè)瀏覽器下都好了，但是在ff出問(wèn)題了，用!important又會(huì)把ie7做的不兼容，很頭疼，在想，有沒(méi)有什么方法只對(duì)ff下進(jìn)行操做，我用過(guò)這個(gè)方法，感覺(jué)得是百試不爽，就是在屬性前面加符號(hào)如：*、&，￥，#，@，―， ，加過(guò)符號(hào)的屬性只有ie的瀏覽器才識(shí)別，而ff不識(shí)別，方法如下(注意有符號(hào)的屬性和沒(méi)符號(hào)的屬性的順序)
height:100px;/*ff下顯示100的高*/
height:120px;/*ie678下顯示120高*/
5.有時(shí)候，會(huì)在布局的時(shí)候，發(fā)現(xiàn)，有一個(gè)div浮動(dòng)了，接下來(lái)的一個(gè)div本來(lái)是要在下面顯示的，結(jié)果跑上面去了，這種情況一般在ff下面會(huì)出現(xiàn)，解決的辦法就是清除一下浮動(dòng)，在設(shè)置過(guò)浮動(dòng)的那個(gè)div下面加一個(gè)div，css面寫(xiě)個(gè)clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6. 再就是居中問(wèn)題，這個(gè)問(wèn)題在新手身上很多，主要原因是對(duì)盒子模型不夠理解，沒(méi)熟記盒子模型，如果發(fā)現(xiàn)你的頁(yè)面沒(méi)有局中，我現(xiàn)在知道的，有這幾個(gè)原因：1. 一個(gè)是沒(méi)盒子，就是body后的一個(gè)大div把所有div裝起來(lái)的那個(gè)，你沒(méi)寫(xiě)。2.就是你寫(xiě)了，但是寬度沒(méi)用絕對(duì)寬度：而是用一個(gè)相對(duì)的寬度，想局中，必須用絕對(duì)寬度。-
7.擴(kuò)展：如果我想在設(shè)計(jì)的時(shí)候，實(shí)現(xiàn)ie6，ie7,ff下出現(xiàn)三種不同的效果，比如ie6下背景紅色，ie7下藍(lán)色ff下綠色，這里，我自己試過(guò)，可以，用兼容的方法（注意順序，可以好好理解一下）。7 l& t- o7 k- a1 i
background:red;/*ff里顯示的紅色*/
background:blue !important;/*ie7下面顯示的藍(lán)色*/
background:green;/*ie6下面顯示的綠色*/
- .color{
-
- background-color: #cc00ff;
-
- background-color: #ff0000\9;
-
- *background-color: #0066ff;
-
- _background-color: #009933;
-
- }
.color{background-color: #cc00ff;background-color: #ff0000\9;*background-color: #0066ff;_background-color: #009933;}
**記住上面得樣式解釋為順序是 ff、ie8、ie7、ie6 **
顯示的結(jié)果：
用火狐瀏覽，顏色是紫色
用 ie8 瀏覽，顏色是紅色
用 ie7 瀏覽，顏色是藍(lán)色
用 ie6 瀏覽，顏色是綠色
如果你只是為了兼容ie7和8，其實(shí)可以在<head>里加上這樣一條代碼：
所有瀏覽器 通用
height: 100px;
ie6 專(zhuān)用
_height: 100px;
ie6 專(zhuān)用
*height: 100px;
ie7 專(zhuān)用
* height: 100px;
ie7、ff 共用
height: 100px !important;
一、css hack
1, !important
隨著ie7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)ie6的hack.(注意寫(xiě)法.記得該聲明位置需要提前.)
以下為引用的內(nèi)容：
<style>
#wrapper
{
width: 100px!important; /* ie7 ff */
width: 80px; /* ie6 */
}
</style> |
2, ie6/ie7對(duì)firefox
以下為引用的內(nèi)容：
* html 與 *html 是ie特有的標(biāo)簽, firefox 暫不支持.而* html 又為 ie7特有標(biāo)簽.
<style>
#wrapper
{
#wrapper { width: 120px; } /* firefox */
*html #wrapper { width: 80px;} /* ie6 fixed */
* html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style> |
注意:
* html 對(duì)ie7的hack 必須保證html頂部有如下聲明：
<!doctype html public “-//w3c//dtd html 4.01 transitional//en” ”http://www./tr/html4/loose.dtd”>
二、萬(wàn)能 float 閉合
關(guān)于 clear float 的原理可參見(jiàn) [how to clear floats without structural markup]
將以下代碼加入global css 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
以下為引用的內(nèi)容：<style>
/* clear fix */.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* hide from ie mac */
.clearfix {display:block;}
/* end hide from ie mac */
/* end of clearfix */
</style> |
三、其他兼容技巧
1, ff下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但ie不會(huì).(可用!important解決) 如width:115px !important;width:120px;padding:5px;
必須注意的是， !important; 一定要在前面。
2, 居中問(wèn)題.
1).垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) vertical-align: middle.( 注意內(nèi)容不要換行.)
2).水平居中. margin: 0 auto;(當(dāng)然不是萬(wàn)能)
3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見(jiàn)于導(dǎo)航標(biāo)簽)
4, ff 和 ie 對(duì) box 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問(wèn)題.
5, ul 標(biāo)簽在 ff 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).
7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 ie.
兼容代碼:兼容最推薦的模式。
/* ff */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* ie6 */
*html .submitbutton {
margin-top: 21px;
}
/* ie7 */
* html .submitbutton {
margin-top: 21px;
}
什么是瀏覽器兼容：當(dāng)我們使用不同的瀏覽器（firefox ie7 ie6）訪問(wèn)同一個(gè)網(wǎng)站，或者頁(yè)面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問(wèn)題，有的顯示出來(lái)正常，有的顯示出來(lái)不正常，我們?cè)诰帉?xiě)css的時(shí)候會(huì)很惱火，剛修復(fù)了這個(gè)瀏覽器的問(wèn)題，結(jié)果另外一個(gè)瀏覽器卻出了新問(wèn)題。而兼容就是一種辦法，能讓你在一個(gè)css里面獨(dú)立的寫(xiě)支持不同瀏覽器的樣式。這下就和諧了。呵呵！
最近微軟發(fā)布的ie7瀏覽器的兼容性確實(shí)給一些網(wǎng)頁(yè)制作人員添加了一個(gè)沉重的負(fù)擔(dān)，雖然ie7已經(jīng)走向標(biāo)準(zhǔn)化，但還是有許多和ff不同的地方，所以需要用到ie7的兼容。
有一點(diǎn)邏輯思想的人都會(huì)知道可以用ie和ff的兼容結(jié)合起來(lái)使用，下面介紹三個(gè)兼容，例如：（適合新手，呵呵，高手就在這里路過(guò)吧。）
程序代碼
第一個(gè)兼容，ie ff 所有瀏覽器 公用（其實(shí)也不算是兼容）
height:100px;
第二個(gè)兼容 ie6專(zhuān)用
_height:100px;
第三個(gè)兼容 ie6 ie7公用
*height:100px;
介紹完了這三個(gè)兼容了，下面我們?cè)賮?lái)看看如何在一個(gè)樣式里分別給一個(gè)屬性定義ie6 ie7 ff專(zhuān)用的兼容，看下面的代碼，順序不能錯(cuò)哦：
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：
在ff下，第2、3個(gè)屬性ff不認(rèn)識(shí)，所以它讀的是 height:100px;
在ie7下，第三個(gè)屬性ie7不認(rèn)識(shí)，所以它讀第1、2個(gè)屬性，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性，所以ie7最終讀出的是第2個(gè)屬性 *height:120px;
在ie6下，三個(gè)屬性ie6都認(rèn)識(shí)，所以三個(gè)屬性都可以讀取，又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性，所以ie6最終讀取的是第三個(gè)屬性。
1 針對(duì)firefox ie6 ie7的css樣式
現(xiàn)在大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，
但是ie7對(duì)!important可以正確解釋?zhuān)瑫?huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！找到一個(gè)針
對(duì)ie7不錯(cuò)的hack方式就是使用“* html”，現(xiàn)在用ie7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了。
現(xiàn)在寫(xiě)一個(gè)css可以這樣：
以下為引用的內(nèi)容：
#1 { color: #333; } /* moz */
* html #1 { color: #666; } /* ie6 */
* html #1 { color: #999; } /* ie7 */ |
那么在firefox下字體顏色顯示為#333，ie6下字體顏色顯示為#666，ie7下字體顏色顯示為#999。
2 css布局中的居中問(wèn)題
主要的樣式定義如下：
body {text-align: center;}
#center { margin-right: auto; margin-left: auto; }
說(shuō)明：
首先在父級(jí)元素定義text-align: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于ie這樣設(shè)定就已經(jīng)可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“margin-right: auto;margin-left: auto; ”
需要說(shuō)明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè)div里，你可以依次拆出多個(gè)div，
只要在每個(gè)拆出的div里定義margin-right: auto;margin-left: auto; 就可以了。
3 盒模型不同解釋
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff ie6.0 width /**/:500px; //for ie6.0-}
4 浮動(dòng)ie產(chǎn)生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下ie會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略}
這里細(xì)說(shuō)一下block,inline兩個(gè)元素,block元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);
#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;
ie不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，
正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話，ie下面根本等于沒(méi)有設(shè)置寬度和高度。
比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁(yè)面的最小寬度
min-width是個(gè)非常方便的css命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但ie不認(rèn)得這個(gè)，
而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在ie上也能用，可以把一個(gè)<div> 放到 <body> 標(biāo)簽下，然后為div指定一個(gè)類(lèi)：
然后css這樣設(shè)計(jì)：
#container{ min-width: 600px; width:expression(document.body.clientwidth < 600? “600px”: “auto” );}
第一個(gè)min-width是正常的；但第2行的width使用了javascript，這只有ie才認(rèn)得，這也會(huì)讓你的html文檔不太正規(guī)。它實(shí)際上通過(guò)javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。
7 清除浮動(dòng)
.hackbox{ display:table; //將對(duì)象作為塊元素級(jí)的表格顯示}或者.hackbox{ clear:both;}
或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，ie不支持此偽對(duì)象，非ie 瀏覽器支持，
所 以并不影響到ie/win瀏覽器。這種的最麻煩的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 div浮動(dòng)ie文本產(chǎn)生3象素的bug
左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關(guān)鍵}
html代碼<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>
9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)
p[id]{}div[id]{}
這個(gè)對(duì)于ie6.0和ie6.0以下的版本都隱藏,ff和opera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
10 ie捉迷藏的問(wèn)題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，div等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。
有些內(nèi)容顯示不出來(lái)，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。
解決辦法：對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。
11 高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用
margin 或paddign 時(shí)。例：
<div id=”box”>
<p>p對(duì)象中的內(nèi)容</p>
</div>
css：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解決方法：在p對(duì)象上下各加2個(gè)空的div對(duì)象css代碼：.1{height:0px;overflow:hidden;}或者為div加上border屬性。
屏蔽ie瀏覽器（也就是ie下不顯示）
*:lang(zh) select {font:12px !important;} /*ff,op可見(jiàn)*/
select:empty {font:12px !important;} /*safari可見(jiàn)*/
這里select是選擇符，根據(jù)情況更換。第二句是mac上safari瀏覽器獨(dú)有的。
僅ie7識(shí)別
* html {…}
當(dāng)面臨需要只針對(duì)ie7做樣式的時(shí)候就可以采用這個(gè)兼容。
ie6及ie6以下識(shí)別
* html {…}
這個(gè)地方要特別注意很多地主都寫(xiě)了是ie6的兼容其實(shí)ie5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅ie6不識(shí)別
select { display /*ie6不識(shí)別*/:none;}
這里主要是通過(guò)css注釋分開(kāi)一個(gè)屬性與值，流釋在冒號(hào)前。
僅ie6與ie5不識(shí)別
select/**/ { display /*ie6,ie5不識(shí)別*/:none;}
這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)css注釋。
僅ie5不識(shí)別
select/*ie5不識(shí)別*/ { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋。只有ie5不識(shí)別
盒模型解決方法
selct {width:ie5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過(guò)!important來(lái)處理的。這點(diǎn)要明確。
清除浮動(dòng)
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題 。
截字省略號(hào)
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前firefox并不支持。
只有opera識(shí)別
@media all and (min-width: 0px){ select {……} }
針對(duì)opera瀏覽器做單獨(dú)的設(shè)定。
以上都是寫(xiě)css中的一些兼容，建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系)，這樣可以減少你使用兼容的頻率，不要進(jìn)入理解誤區(qū)，并不是一個(gè)頁(yè)面就需要很多的兼容來(lái)保持多瀏覽器兼容)，很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好，這些都是用來(lái)解決局部的兼容性問(wèn)題，如果希望把兼容性的內(nèi)容也分離出來(lái)，不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫(xiě)在css中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫(xiě)在html中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。
ie5.x的過(guò)濾器，只有ie5.x可見(jiàn)
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */
ie5/mac的過(guò)濾器，一般用不著
/**//*/
@import "ie5mac.css";
/**/
下面是ie的條件注釋?zhuān)瑐€(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng) 兼容是比較完美的多瀏覽器兼容的解決辦法。把需要兼容的地方單獨(dú)放到一個(gè)文件里面，當(dāng)瀏覽器版本符合的時(shí)候就可以調(diào)用那個(gè)被兼容的樣式，這樣不僅使用起來(lái)非常方便，而且對(duì)于制作這個(gè)css本身來(lái)講，可以更嚴(yán)格的觀察到是否有必要使用兼容，很多情況下，當(dāng)我本人寫(xiě)css如果把全部代碼包括兼容都寫(xiě)到一個(gè)css文件的時(shí)候的時(shí)候會(huì)很隨意，想怎么兼容就怎么兼容，而你獨(dú)立出來(lái)寫(xiě)的時(shí)候，你就會(huì)不自覺(jué)的考慮是否有必要兼容，是先兼容 css？還是先把主css里面的東西調(diào)整到盡可能的不需要兼容？當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話的時(shí)候，你是不是很有成就感呢？你知道怎么選擇了吧～～呵呵
ie的if條件兼容 自己可以靈活使用參看這篇ie條件注釋
only ie
所有的ie可識(shí)別
只有ie5.0可以識(shí)別
only ie 5.0
ie5.0包換ie5.5都可以識(shí)別
僅ie6可識(shí)別
only ie 7/-
ie6以及ie6以下的ie5.x都可識(shí)別
only ie 7/-
僅ie7可識(shí)別
css 當(dāng)中有許多的東西不按照某些規(guī)律來(lái)的話，會(huì)讓你很心煩，雖然你可以通過(guò)很多的兼容，很多的!important 來(lái)控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的css讓ie6,ie7,firefox,甚至safari,opera運(yùn)行起來(lái)完美無(wú)缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實(shí)你要知道ie 和 firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。
div ul li 的嵌套順序
今天只講一個(gè)規(guī)則。就是<div><ul><li>的三角關(guān)系。我的經(jīng)驗(yàn)就是<div>在最外面，里面是<ul>，然后再是<li>，當(dāng)然<li>里面又可以嵌套<div>什么的，但是并不建議你嵌套很多東西。當(dāng)你符合這樣的規(guī)則的時(shí)候，那些倒霉的，不聽(tīng)話的間隙就不會(huì)在里面出現(xiàn)了，當(dāng)你僅僅是<div>里面放<li>，而不用<ul>的時(shí)候，你會(huì)發(fā)現(xiàn)你的間隙十分難控制，一般情況下，ie6和ie7會(huì)憑空多一些間距。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變ie的margin，然后調(diào)整firefox下面的padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得css將變得臭長(zhǎng)無(wú)比，你不得不多考慮更多可能出現(xiàn)這種問(wèn)題補(bǔ)救措施，雖然你知道千篇一律來(lái)兼容它們，但是你會(huì)煩得要命。
具體嵌套寫(xiě)法
遵循上面得嵌套方式，<div><ul><li></li></ul></div> 然后在css 里面告訴 ul {margin:0px;padding:0px;list-style:none;}，其中l(wèi)ist-style:none是不讓<li>標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類(lèi)型的標(biāo)記，因?yàn)閕e和firefox顯示出來(lái)默認(rèn)效果有些不一樣。因此這樣不需要做任何手腳，你的ie6、和ie7、firefox顯示出來(lái)的東西(外距，間距，高度，寬度)就幾乎沒(méi)什么區(qū)別了，也許細(xì)心的你會(huì)在某一個(gè)時(shí)刻發(fā)現(xiàn)：兩個(gè)象素的差別，但那已經(jīng)很完美了，不需要你通過(guò)調(diào)整大片的css來(lái)控制它們的顯示了，你愿意，你可以?xún)H僅兼容一兩個(gè)地方，而且通常這種兼容可以適應(yīng)各種地方，不需要你重復(fù)在不同的地方調(diào)試不同的兼容方式c減輕你的煩。你可以u(píng)l.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統(tǒng)一兼容。嘗試一下吧，再也不要亂嵌套了，雖然在div css的方式下你幾乎可以想怎么嵌套就怎么嵌套，但是按照上面的規(guī)律你將輕松很多，從而事半功倍！
六、css兼容要點(diǎn)分析ie vs ff
css 兼容要點(diǎn)：
doctype 影響 css 處理
ff: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, ie 不行
ff: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
ff: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 ie 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
ff: 支持 !important, ie 則忽略, 可用 !important 為 ff 特別設(shè)置樣式
div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)div一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
cursor: pointer 可以同時(shí)在 ie ff 中顯示游標(biāo)手指狀， hand 僅 ie 可以
ff: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格xhtml css兼容性解決方案小集
使用xhtml＋css構(gòu)架好處不少，但也確實(shí)存在一些問(wèn)題，不論是因?yàn)槭褂貌皇炀氝€是思路不清晰，我就先把一些我遇到的問(wèn)題寫(xiě)在下面，省的大家四處找^^
1、在mozilla firefox和ie中的box模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個(gè)margin的順序一定不能寫(xiě)反，據(jù)阿捷的說(shuō)法!important這個(gè)屬性ie不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在ie下其實(shí)解釋成這樣：
div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來(lái)執(zhí)行，所以不可以只寫(xiě)margin:xxpx!important;
2、ie5 和ie6的box解釋不一致ie5下div{width:300px;margin:0 10px 0 10px;}div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在ie6和其他瀏覽器上寬度則是以300px 10px(右填充) 10px(左填充)=320px來(lái)計(jì)算的。這時(shí)我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
，關(guān)于這個(gè)/**/是什么我也不太明白，只知道ie5和firefox都支持但ie6不支持，如果有人理解的話，請(qǐng)告訴我一聲，謝了?。海?/font>
3、ul標(biāo)簽在mozilla中默認(rèn)是有padding值的,而在ie中只有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大部分問(wèn)題。
4、關(guān)于腳本，在xhtml1.1中不支持language屬性，只需要把代碼改為
< type=”text/java”>
就可以了
七、10個(gè)你未必知道的css技巧
1、css字體屬性簡(jiǎn)寫(xiě)規(guī)則
一般用css設(shè)定字體屬性是這樣做的：
| 以下為引用的內(nèi)容：font-weight:bold;font-style:italic;font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
|
但也可以把它們?nèi)繉?xiě)到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不錯(cuò)！只有一點(diǎn)要提醒的：這種簡(jiǎn)寫(xiě)方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒(méi)有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值，這點(diǎn)要記上。
2、同時(shí)使用兩個(gè)類(lèi)
一般只能給一個(gè)元素設(shè)定一個(gè)類(lèi)（class），但這并不意味著不能用兩個(gè)。事實(shí)上，你可以這樣：
<p class=”text side”>…</p>
同時(shí)給p元素兩個(gè)類(lèi)，中間用空格格開(kāi)，這樣所有text和side兩個(gè)類(lèi)的屬性都會(huì)加到p元素上來(lái)。如果它們兩個(gè)類(lèi)中的屬性有沖突的話，后設(shè)置的起作用，即在css文件中放在后面的類(lèi)的屬性起作用。
補(bǔ)充：對(duì)于一個(gè)id，不能這樣寫(xiě)<p id=”text side”>…</p>也不能這樣寫(xiě)
3、css border的缺省值
通?？梢栽O(shè)定邊界的顏色，寬度和風(fēng)格，如：
border: 3px solid #000
這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。
如果只指定了風(fēng)格，其他屬性就會(huì)使用缺省值。一般地，border的寬度缺省是medium，一般等于3到4個(gè)像素；缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話，就不用設(shè)那么多了。
4、css用于文檔打印
許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂胏ss來(lái)設(shè)定打印風(fēng)格。
也就是說(shuō)，可以為頁(yè)面指定兩個(gè)css文件，一個(gè)用于屏幕顯示，一個(gè)用于打?。?/font>
<link type=”text/css” rel=”stylesheet” href=”/blog/stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是顯示，第2行是打印，注意其中的media屬性。
但應(yīng)該在打印css中寫(xiě)什么東西呢？你可以按設(shè)計(jì)普通css的方法來(lái)設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)css設(shè)成顯示css來(lái)檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來(lái)關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。要想了解更多，可以看“打印差異”這一篇。
5、圖片替換技巧
一般都建議用標(biāo)準(zhǔn)的html來(lái)顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時(shí)，就只能用圖片了。
比如你想整個(gè)賣(mài)東西的圖標(biāo)，你就用了這個(gè)圖片：
<h1><img src=”/blog/widget-image.gif” alt=”buy widgets” /></h1>
這當(dāng)然可以，但對(duì)搜索引擎來(lái)說(shuō)，和正常文字相比，它們對(duì)alt里面的替換文字幾乎沒(méi)有興趣這是因?yàn)樵S多設(shè)計(jì)者在這里放許多關(guān)鍵詞來(lái)騙搜索引擎。所以方法應(yīng)該是這樣的：
<h1>buy widgets</h1>
但這樣就沒(méi)有特殊字體了。要想達(dá)到同樣效果，可以這樣設(shè)計(jì)css：
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的圖片的高度。這里，圖片會(huì)當(dāng)作背景顯示出來(lái)，而真正的文字由于設(shè)定了-2000像素這個(gè)縮進(jìn)，它們會(huì)出現(xiàn)在屏幕左邊2000點(diǎn)的地方，就看不見(jiàn)了。但這對(duì)于關(guān)閉圖片的人來(lái)說(shuō)，可能全部看不到了，這點(diǎn)要注意。
6、css box模型的另一種調(diào)整技巧
這個(gè)box模型的調(diào)整主要是針對(duì)ie6之前的ie瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
這樣調(diào)用它：
<div id=”box”>…</div>
這時(shí)盒子的全寬應(yīng)該是150點(diǎn)，這在除ie6之前的ie瀏覽器之外的所有瀏覽器上都是正確的。但在ie5這樣的瀏覽器上，它的全寬仍是100點(diǎn)?？梢杂靡郧叭税l(fā)明的box調(diào)整方法來(lái)處理這種差異。
但用css也可以達(dá)到同樣的目的，讓它們顯示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
這樣調(diào)用：
<div id=”box”><div>…</div></div>
這樣，不管什么瀏覽器，寬度都是150點(diǎn)了。
7、塊元素居中對(duì)齊
如果想做個(gè)固定寬度的網(wǎng)頁(yè)并且想讓網(wǎng)頁(yè)水平居中的話，通常是這樣：
#content { width: 700px; margin: 0 auto }
你會(huì)使用 <div id=”content”> 來(lái)圍上所有元素。這很簡(jiǎn)單，但不夠好，ie6之前版本會(huì)顯示不出這種效果。改css如下：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會(huì)把網(wǎng)頁(yè)內(nèi)容都居中，所以在content中又加入了
text-align: left 。
8、用css來(lái)處理垂直對(duì)齊
垂直對(duì)齊用表格可以很方便地實(shí)現(xiàn)，設(shè)定表格單元 vertical-align: middle 就可以了。但對(duì)css來(lái)說(shuō)這沒(méi)用。如果你想設(shè)定一個(gè)導(dǎo)航條是2em高，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個(gè)屬性是沒(méi)用的。
css方法是什么呢？對(duì)了，把這些文字的行高設(shè)為 2em：line-height: 2em ，這就可以了。
9、css在容器內(nèi)定位
css的一個(gè)好處是可以把一個(gè)元素任意定位，在一個(gè)容器內(nèi)也可以。比如對(duì)這個(gè)容器：
#container { position: relative }
這樣容器內(nèi)所有的元素都會(huì)相對(duì)定位，可以這樣用：
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30點(diǎn)，距上5點(diǎn)，可以這樣：
#navigation { position: absolute; left: 30px; top: 5px }
當(dāng)然，你還可以這樣：
margin: 5px 0 0 30px
注意4個(gè)數(shù)字的順序是：上、右、下、左。當(dāng)然，有時(shí)候定位的方法而不是邊距的方法更好些。
10、直通到屏幕底部的背景色
在垂直方向是進(jìn)行控制是css所不能的。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁(yè)面底部，用表格是很方便的，但如果只用這樣的css：
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會(huì)直通到底部的，半路內(nèi)容結(jié)束時(shí)它就結(jié)束了。該怎么辦呢？
不幸的是，只能采用欺騙的手段了，給這較短的一欄加上個(gè)背景圖，寬度和欄寬一樣，并讓它的顏色和設(shè)定的背景色一樣。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此時(shí)不能用em做單位，因?yàn)槟菢拥脑?，一旦讀者改變了字體大小，這個(gè)花招就會(huì)露餡，只能使用px。
代碼示例：
/*設(shè)置瀏覽器標(biāo)簽屬性*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; font-size:12px;}
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
/*重設(shè)瀏覽器標(biāo)簽屬性*/
h1 {font-size: 14px;}
/*設(shè)置整體網(wǎng)頁(yè)水平居中 */
body{text-align:center;}
.tbody{width:1004px; text-aling:left}
/*或者（可能某些瀏覽器不支持） */
.tbody{width:1004px; margin: 0 auto;}
/*設(shè)置某id下div水平居中 */
div#container {margin: 0 auto;}
3.控制位置：絕對(duì)位置，相對(duì)位置
假如有兩個(gè)div
java代碼
1.<div id='parent'>
2.<div id='son'></div>
3.</div>
<div id='parent'>
<div id='son'></div>
</div>
div有l(wèi)eft和top屬性,是用來(lái)定位的.
如果內(nèi)層的div的position屬性是absolute.那他就是相對(duì)于文檔的左上角的位置..
如果內(nèi)層的div(id為son的那個(gè))position屬性為relative,那它的left和top值就是相對(duì)于外層的div的左上角的距離.
4.將重要元素放置在屏幕中央
如果你希望將您想要的東西放在最中央，可以使用以下css：
java代碼
1.div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
2.div.popup { margin-top: -200px; margin-left: -250px;}
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
您必須明確的指定寬度和高度，再把top和left屬性設(shè)為他們的一半，這樣就可以是這個(gè)部分回到屏幕的中心。
5.可以重復(fù)利用的規(guī)則
java代碼
1..left {float: left;}
2..right {float: right;}
3.img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
4.img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
設(shè)置自己的css樣式表，就可以在您需要的時(shí)候直接的添加標(biāo)記即可。
6. 解決ie6 的浮動(dòng)元素的雙倍邊距問(wèn)題
對(duì)一個(gè)div設(shè)置了float:left 和 margin-left:100px 那么在ie6中，這個(gè)bug就會(huì)出現(xiàn)。您只需要多設(shè)置一個(gè)display即可，代碼如下：
java代碼
1.div {float:left;margin:40px;display:inline;}
div {float:left;margin:40px;display:inline;}
7.簡(jiǎn)單的導(dǎo)航菜單
在您的設(shè)計(jì)中預(yù)設(shè)一個(gè)導(dǎo)航欄是非常有益的?？梢宰寗e人對(duì)你網(wǎng)頁(yè)的主要內(nèi)容有一個(gè)大致的了解。第一次來(lái)的xhtml：
java代碼
1.<div id=”navbar”>
2.<ul>
3.<li><a href=”http://www.”>peakflow design</a></li>
4.<li><a href=”http://www.google.com”">google</a></li>
5.<li><a href=”http:///”>zen habits</a></li>
6.</ul>
7.</div>
<div id=”navbar”>
<ul>
<li><a href=”http://www.”>peakflow design</a></li>
<li><a href=”http://www.google.com”">google</a></li>
<li><a href=”http:///”>zen habits</a></li>
</ul>
</div>
css代碼：
java代碼
1.#navbar ul li {display:inline;margin:0 10px 0 0;}
2.#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
3.#navbar ul li a:hover {background:#eee;color:black;}
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}
8.不使用table的form表單
正如我們現(xiàn)在進(jìn)行網(wǎng)站設(shè)計(jì)的table-free，把重點(diǎn)是放在使用divs上。不再對(duì)表的列和域進(jìn)行約束，所以我們需要一些好用的css，在jeddhowden.com 發(fā)現(xiàn)
java代碼
1.xhtml:
2.<form action=”form.php” method=”post”>
3.<fieldset>
4.<legend>personal information</legend>
5.<div>
6.<label for=”first_name”>first name:</label>
7.<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
8.</div>
9.<div>
10.<label for=”last_name”>last name:</label>
11.<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
12.</div>
13.<div>
14.<label for=”postal”>zip/postal code:</label>
15.<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
16.</div>
17.</fieldset>
18.</form>
xhtml:
<form action=”form.php” method=”post”>
<fieldset>
<legend>personal information</legend>
<div>
<label for=”first_name”>first name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
</div>
<div>
<label for=”last_name”>last name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
</div>
<div>
<label for=”postal”>zip/postal code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
</div>
</fieldset>
</form>
java代碼
1.css:
2.form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
3.form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
css:
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
9.讓footer總是停留在頁(yè)面的底部
在網(wǎng)頁(yè)的底部總是保留著公司的版本信息，如何是這部分信息來(lái)實(shí)現(xiàn)呢？這是一個(gè)很古老的技術(shù)，這都要?dú)w功于the man in blue 。
java代碼
1.xhtml：
2.<body>
3.<div id=”nonfooter”>
4.<div id=”content”> *place all page content here* </div>
5.</div>
6.<div id=”footer”> *place anything you want in your footer here*
7.</div>
8.</body>
xhtml：
<body>
<div id=”nonfooter”>
<div id=”content”> *place all page content here* </div>
</div>
<div id=”footer”> *place anything you want in your footer here*
</div>
</body>
java代碼
1.css:
2.html, body { height: 100%; }
3.#nonfooter { position: relative; min-height: 100%; }
4.* html #nonfooter { height: 100%; }
5.#content { padding-bottom: 9em; }
6.#footer { position: relative; margin-top: -7.5em; }
css:
html, body { height: 100%; }
#nonfooter { position: relative; min-height: 100%; }
* html #nonfooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }
10.在同一元素上使用多種類(lèi)
隨著有用的功能越來(lái)越多的，大多數(shù)的人都忽略了內(nèi)部css的選擇。一個(gè)元素可以套用很多的類(lèi)，例如：
java代碼
1..red {color: red;}
2..bold {font-weight: strong;}
.red {color: red;}
.bold {font-weight: strong;}
我們可以運(yùn)用它：
java代碼
1.<p class=”red bold”>this text will be red yet also bold!</p>
<p class=”red bold”>this text will be red yet also bold!</p>
