在網站設計的(de)時(shí)候，應該注意css樣式兼容不同浏覽器問題，特别是對(duì)完全使用(yòng)DIV CSS設計的(de)網，就應該更注意IE6 IE7 FF對(duì)CSS樣式的(de)兼容，不然，你的(de)網亂可(kě)能出去不想出現的(de)效果！
所有浏覽器 通(tōng)用(yòng) height: 100px; IE6 專用(yòng) _height: 100px; IE6 專用(yòng) *height: 100px; IE7 專用(yòng) *+height: 100px; IE7、FF 共用(yòng) height: 100px !important;
一、CSS HACK
1, !important
随著(zhe)IE7對(duì)!important的(de)支持, !important 方法現在隻針對(duì)IE6的(de)HACK.(注意寫法.記得(de)該聲明(míng)位置需要提前.)
以下(xià)爲引用(yòng)的(de)内容：
2, IE6/IE7對(duì)FireFox
以下(xià)爲引用(yòng)的(de)内容：*+html 與 *html 是IE特有的(de)标簽, firefox 暫不支持.而*+html 又爲 IE7特有标簽.
注意:*+html 對(duì)IE7的(de)HACK 必須保證HTML頂部有如下(xià)聲明(míng)：
二、萬能 float 閉合
關于 clear float 的(de)原理(lǐ)可(kě)參見 [How To Clear Floats Without Structural Markup]将以下(xià)代碼加入Global CSS 中,給需要閉合的(de)div加上 class=”clearfix” 即可(kě),屢試不爽.
以下(xià)爲引用(yòng)的(de)内容：
三、其他(tā)兼容技巧
1, FF下(xià)給 div 設置 padding 後會導緻 width 和(hé) height 增加, 但IE不會.(可(kě)用(yòng)!important解決) 如width:115px !important;width:120px;padding:5px;
必須注意的(de)是， !important; 一定要在前面。 2, 居中問題.1).垂直居中.将 line-height 設置爲 當前 div 相同的(de)高(gāo)度, 再通(tōng)過 vertical-align: middle.( 注意内容不要換行.)2).水(shuǐ)平居中. margin: 0 auto;(當然不是萬能)3, 若需給 a 标簽内内容加上 樣式, 需要設置 display: block;(常見于導航标簽)4, FF 和(hé) IE 對(duì) BOX 理(lǐ)解的(de)差異導緻相差 2px 的(de)還(hái)有設爲 float的(de)div在ie下(xià) margin加倍等問題.5, ul 标簽在 FF 下(xià)面默認有 list-style 和(hé) padding . 最好事先聲明(míng), 以避免不必要的(de)麻煩. (常見于導航标簽和(hé)内容列表)6, 作爲外部 wrapper 的(de) div 不要定死高(gāo)度, 最好還(hái)加上 overflow: hidden.以達到高(gāo)度自适應.7, 關于手形光(guāng)标. cursor: pointer. 而hand 隻适用(yòng)于 IE.
兼容代碼:兼容最推薦的(de)模式。 .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } *html .submitbutton { margin-top: 21px; } *+html .submitbutton { margin-top: 21px; } 什(shén)麽是浏覽器兼容：當我們使用(yòng)不同的(de)浏覽器（Firefox IE7 IE6）訪問同一個(gè)網站，或者頁面的(de)時(shí)候，會出現一些不兼容的(de)問題，有的(de)顯示出來(lái)正常，有的(de)顯示出來(lái)不正常，我們在編寫CSS的(de)時(shí)候會很惱火，剛修複了(le)這(zhè)個(gè)浏覽器的(de)問題，結果另外一個(gè)浏覽器卻出了(le)新問題。而兼容就是一種辦法，能讓你在一個(gè)CSS裏面獨立的(de)寫支持不同浏覽器的(de)樣式。這(zhè)下(xià)就和(hé)諧了(le)。呵呵！ 最近微軟發布的(de)IE7浏覽器的(de)兼容性确實給一些網頁制作人(rén)員(yuán)添加了(le)一個(gè)沉重的(de)負擔，雖然IE7已經走向标準化(huà)，但還(hái)是有許多(duō)和(hé)FF不同的(de)地方，所以需要用(yòng)到IE7的(de)兼容。有一點邏輯思想的(de)人(rén)都會知道可(kě)以用(yòng)IE和(hé)FF的(de)兼容結合起來(lái)使用(yòng)，下(xià)面介紹三個(gè)兼容，例如：（适合新手，呵呵，高(gāo)手就在這(zhè)裏路過吧。） 程序代碼 第一個(gè)兼容，IE FF 所有浏覽器 公用(yòng)（其實也(yě)不算(suàn)是兼容） height:100px; 第二個(gè)兼容 IE6專用(yòng) _height:100px; 第三個(gè)兼容 IE6 IE7公用(yòng) *height:100px; 介紹完了(le)這(zhè)三個(gè)兼容了(le)，下(xià)面我們再來(lái)看看如何在一個(gè)樣式裏分(fēn)别給一個(gè)屬性定義IE6 IE7 FF專用(yòng)的(de)兼容，看下(xià)面的(de)代碼，順序不能錯哦： 程序代碼 height:100px; *height:120px; _height:150px; 下(xià)面我簡單解釋一下(xià)各浏覽器怎樣理(lǐ)解這(zhè)三個(gè)屬性： 在FF下(xià)，第2、3個(gè)屬性FF不認識，所以它讀的(de)是 height:100px; 在IE7下(xià)，第三個(gè)屬性IE7不認識，所以它讀第1、2個(gè)屬性，又因爲第二個(gè)屬性覆蓋了(le)第一個(gè)屬性，所以IE7最終讀出的(de)是第2個(gè)屬性 *height:120px; 在IE6下(xià)，三個(gè)屬性IE6都認識，所以三個(gè)屬性都可(kě)以讀取，又因爲第三個(gè)屬性覆蓋掉前2個(gè)屬性，所以IE6最終讀取的(de)是第三個(gè)屬性。
1 針對(duì)firefox ie6 ie7的(de)css樣式現在大(dà)部分(fēn)都是用(yòng)!important來(lái)hack，對(duì)于ie6和(hé)firefox測試可(kě)以正常顯示，但是ie7對(duì)!important可(kě)以正确解釋，會導緻頁面沒按要求顯示！找到一個(gè)針對(duì)IE7不錯的(de)hack方式就是使用(yòng)“*+html”，現在用(yòng)IE7浏覽一下(xià)，應該沒有問題了(le)。現在寫一個(gè)CSS可(kě)以這(zhè)樣：
以下(xià)爲引用(yòng)的(de)内容：#1 { color: #333; }* html #1 { color: #666; }*+html #1 { color: #999; }
那麽在firefox下(xià)字體顔色顯示爲#333，IE6下(xià)字體顔色顯示爲#666，IE7下(xià)字體顔色顯示爲#999。
2 css布局中的(de)居中問題主要的(de)樣式定義如下(xià)：
body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }說明(míng)：首先在父級元素定義TEXT-ALIGN: center;這(zhè)個(gè)的(de)意思就是在父級元素内的(de)内容居中；對(duì)于IE這(zhè)樣設定就已經可(kě)以了(le)。但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設定時(shí)再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要說明(míng)的(de)是，如果你想用(yòng)這(zhè)個(gè)方法使整個(gè)頁面要居中，建議(yì)不要套在一個(gè)DIV裏，你可(kě)以依次拆出多(duō)個(gè)div，隻要在每個(gè)拆出的(de)div裏定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可(kě)以了(le)。
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 浮動ie産生的(de)雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這(zhè)種情況之下(xià)IE會産生200px的(de)距離 display:inline; //使浮動忽略}這(zhè)裏細說一下(xià)block,inline兩個(gè)元素,Block元素的(de)特點是:總是在新行上開始,高(gāo)度,寬度,行高(gāo),邊距都可(kě)以控制(塊元素);Inline元素的(de)特點是:和(hé)其他(tā)元素在同一行上,…不可(kě)控制(内嵌元素);
#box{ display:block; //可(kě)以爲内嵌元素模拟爲塊元素 display:inline; //實現同一行排列的(de)的(de)效果 diplay:table;
IE不認得(de)min-這(zhè)個(gè)定義，但實際上它把正常的(de)width和(hé)height當作有min的(de)情況來(lái)使。這(zhè)樣問題就大(dà)了(le)，如果隻用(yòng)寬度和(hé)高(gāo)度，正常的(de)浏覽器裏這(zhè)兩個(gè)值就不會變，如果隻用(yòng)min-width和(hé)min-height的(de)話(huà)，IE下(xià)面根本等于沒有設置寬度和(hé)高(gāo)度。比如要設置背景圖片，這(zhè)個(gè)寬度是比較重要的(de)。要解決這(zhè)個(gè)問題，可(kě)以這(zhè)樣：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁面的(de)最小寬度
min-width是個(gè)非常方便的(de)CSS命令，它可(kě)以指定元素最小也(yě)不能小于某個(gè)寬度，這(zhè)樣就能保證排版一直正确。但IE不認得(de)這(zhè)個(gè)，而它實際上把width當做(zuò)最小寬度來(lái)使。爲了(le)讓這(zhè)一命令在IE上也(yě)能用(yòng)，可(kě)以把一個(gè)
放到标簽下(xià)，然後爲div指定一個(gè)類：然後CSS這(zhè)樣設計：#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? “600px”: “auto” );}第一個(gè)min-width是正常的(de)；但第2行的(de)width使用(yòng)了(le)Javascript，這(zhè)隻有IE才認得(de)，這(zhè)也(yě)會讓你的(de)HTML文檔不太正規。它實際上通(tōng)過Javascript的(de)判斷來(lái)實現最小寬度。
7 清除浮動
.hackbox{ display:table; //将對(duì)象作爲塊元素級的(de)表格顯示}或者.hackbox{ clear:both;}或者加入:after（僞對(duì)象）,設置在對(duì)象後發生的(de)内容，通(tōng)常和(hé)content配合使用(yòng)，IE不支持此僞對(duì)象，非Ie 浏覽器支持，所 以并不影(yǐng)響到IE/WIN浏覽器。這(zhè)種的(de)最麻煩的(de)……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮動IE文本産生3象素的(de)bug
左邊對(duì)象浮動，右邊采用(yòng)外補丁的(de)左邊距來(lái)定位，右邊對(duì)象内的(de)文本會離左邊有3px的(de)間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這(zhè)句是關鍵}HTML代碼
9 屬性選擇器(這(zhè)個(gè)不能算(suàn)是兼容,是隐藏css的(de)一個(gè)bug)
p[id]{}div[id]{}這(zhè)個(gè)對(duì)于IE6.0和(hé)IE6.0以下(xià)的(de)版本都隐藏,FF和(hé)OPera作用(yòng)屬性選擇器和(hé)子選擇器還(hái)是有區(qū)别的(de),子選擇器的(de)範圍從形式來(lái)說縮小了(le),屬性選擇器的(de)範圍比較大(dà),如p[id]中,所有p标簽中有id的(de)都是同樣式的(de).
10 IE捉迷藏的(de)問題
當div應用(yòng)複雜(zá)的(de)時(shí)候每個(gè)欄中又有一些鏈接，DIV等這(zhè)個(gè)時(shí)候容易發生捉迷藏的(de)問題。有些内容顯示不出來(lái)，當鼠标選擇這(zhè)個(gè)區(qū)域是發現内容确實在頁面。解決辦法：對(duì)#layout使用(yòng)line-height屬性 或者給#layout使用(yòng)固定高(gāo)和(hé)寬。頁面結構盡量簡單。
11 高(gāo)度不适應 高(gāo)度不适應是當内層對(duì)象的(de)高(gāo)度發生變化(huà)時(shí)外層高(gāo)度不能自動進行調節，特别是當内層對(duì)象使用(yòng) margin 或paddign 時(shí)。例：
p對(duì)象中的(de)内容
CSS： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解決方法：在P對(duì)象上下(xià)各加2個(gè)空的(de)div對(duì)象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。 屏蔽IE浏覽器（也(yě)就是IE下(xià)不顯示） *:lang(zh) select {font:12px !important;} select:empty {font:12px !important;} 這(zhè)裏select是選擇符，根據情況更換。第二句是MAC上safari浏覽器獨有的(de)。 僅IE7識别 *+html {…} 當面臨需要隻針對(duì)IE7做(zuò)樣式的(de)時(shí)候就可(kě)以采用(yòng)這(zhè)個(gè)兼容。 IE6及IE6以下(xià)識别 * html {…} 這(zhè)個(gè)地方要特别注意很多(duō)地主都寫了(le)是IE6的(de)兼容其實IE5.x同樣可(kě)以識别這(zhè)個(gè)兼容。其它浏覽器不識别。 html >body select {……} 這(zhè)句與上一句的(de)作用(yòng)相同。 僅IE6不識别 select { display :none;} 這(zhè)裏主要是通(tōng)過CSS注釋分(fēn)開一個(gè)屬性與值，流釋在冒号前。 僅IE6與IE5不識别 select { display :none;} 這(zhè)裏與上面一句不同的(de)是在選擇符與花括号之間多(duō)了(le)一個(gè)CSS注釋。 僅IE5不識别 select { display:none;} 這(zhè)一句是在上一句中去掉了(le)屬性區(qū)的(de)注釋。隻有IE5不識别 盒模型解決方法 selct {width:IE5.x寬度; voice-family :""}""; voice-family:inherit; width:正确寬度;} 盒模型的(de)清除方法不是通(tōng)過!important來(lái)處理(lǐ)的(de)。這(zhè)點要明(míng)确。 清除浮動 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，當子級都爲浮動時(shí)，那麽父級的(de)高(gāo)度就無法完全的(de)包住整個(gè)子級，那麽這(zhè)時(shí)用(yòng)這(zhè)個(gè)清除浮動的(de)兼容來(lái)對(duì)父級做(zuò)一次定義，那麽就可(kě)以解決這(zhè)個(gè)問題 。 截字省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } 這(zhè)個(gè)是在越出長(cháng)度後會自行的(de)截掉多(duō)出部分(fēn)的(de)文字，并以省略号結尾，很好的(de)一個(gè)技術。隻是目前Firefox并不支持。 隻有Opera識别 @media all and (min-width: 0px){ select {……} } 針對(duì)Opera浏覽器做(zuò)單獨的(de)設定。 以上都是寫CSS中的(de)一些兼容，建議(yì)遵循正确的(de)标簽嵌套(div ul li 嵌套結構關系)，這(zhè)樣可(kě)以減少你使用(yòng)兼容的(de)頻(pín)率，不要進入理(lǐ)解誤區(qū)，并不是一個(gè)頁面就需要很多(duō)的(de)兼容來(lái)保持多(duō)浏覽器兼容)，很多(duō)情況下(xià)也(yě)許一個(gè)兼容都不用(yòng)也(yě)可(kě)以讓浏覽器工作得(de)非常好，這(zhè)些都是用(yòng)來(lái)解決局部的(de)兼容性問題，如果希望把兼容性的(de)内容也(yě)分(fēn)離出來(lái)，不妨試一下(xià)下(xià)面的(de)幾種過濾器。這(zhè)些過濾器有的(de)是寫在CSS中通(tōng)過過濾器導入特别的(de)樣式，也(yě)有的(de)是寫在HTML中的(de)通(tōng)過條件來(lái)鏈接或是導入需要的(de)補丁樣式。 IE5.x的(de)過濾器，隻有IE5.x可(kě)見 @media tty { i{content:"";}} @import ’ie5win.css’; IE5/MAC的(de)過濾器，一般用(yòng)不著(zhe) 下(xià)面是IE的(de)條件注釋，個(gè)人(rén)覺得(de)用(yòng)條件注釋調用(yòng)相應 兼容是比較完美(měi)的(de)多(duō)浏覽器兼容的(de)解決辦法。把需要兼容的(de)地方單獨放到一個(gè)文件裏面，當浏覽器版本符合的(de)時(shí)候就可(kě)以調用(yòng)那個(gè)被兼容的(de)樣式，這(zhè)樣不僅使用(yòng)起來(lái)非常方便，而且對(duì)于制作這(zhè)個(gè)CSS本身來(lái)講，可(kě)以更嚴格的(de)觀察到是否有必要使用(yòng)兼容，很多(duō)情況下(xià)，當我本人(rén)寫CSS如果把全部代碼包括兼容都寫到一個(gè)CSS文件的(de)時(shí)候的(de)時(shí)候會很随意，想怎麽兼容就怎麽兼容，而你獨立出來(lái)寫的(de)時(shí)候，你就會不自覺的(de)考慮是否有必要兼容，是先兼容 CSS？還(hái)是先把主CSS裏面的(de)東西調整到盡可(kě)能的(de)不需要兼容？當你僅用(yòng)很少的(de)兼容就讓很多(duō)浏覽器很乖很聽(tīng)話(huà)的(de)時(shí)候，你是不是很有成就感呢(ne)？你知道怎麽選擇了(le)吧～～呵呵 IE的(de)if條件兼容 自己可(kě)以靈活使用(yòng)參看這(zhè)篇IE條件注釋 Only IE 所有的(de)IE可(kě)識别 隻有IE5.0可(kě)以識别 Only IE 5.0+ IE5.0包換IE5.5都可(kě)以識别 僅IE6可(kě)識别 Only IE 7/- IE6以及IE6以下(xià)的(de)IE5.x都可(kě)識别 Only IE 7/- 僅IE7可(kě)識别 Css 當中有許多(duō)的(de)東西不按照(zhào)某些規律來(lái)的(de)話(huà)，會讓你很心煩，雖然你可(kě)以通(tōng)過很多(duō)的(de)兼容，很多(duō)的(de)!important 來(lái)控制它，但是你會發現長(cháng)此以往你會很不甘心，看看許多(duō)優秀的(de)網站，他(tā)們的(de)CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起來(lái)完美(měi)無缺是不是很羨慕？而他(tā)們看似複雜(zá)的(de)模版下(xià)面使用(yòng)的(de)兼容 少得(de)可(kě)憐。其實你要知道IE 和(hé) Firefox 并不不是那麽的(de)不和(hé)諧，我們找到一定的(de)方法，是完全可(kě)以讓他(tā)們和(hé)諧共處的(de)。不要你認爲發現了(le)兼容的(de)辦法，你就掌握了(le)一切，我們并不是兼容的(de)奴隸。 div ul li 的(de)嵌套順序 今天隻講一個(gè)規則。就是
的(de)三角關系。我的(de)經驗就是
在最外面，裏面是
，而不用(yòng)
的(de)時(shí)候，你會發現你的(de)間隙十分(fēn)難控制，一般情況下(xià)，IE6和(hé)IE7會憑空多(duō)一些間距。但很多(duō)情況你來(lái)到下(xià)一行，間隙就沒了(le)，但是前面的(de)内容又空了(le)很大(dà)一塊，出現這(zhè)種情況雖然你可(kě)以改變IE的(de)Margin，然後調整Firefox下(xià)面的(de)Padding，以便使得(de)兩者顯示起來(lái)得(de)效果很相似，但是你得(de)CSS将變得(de)臭長(cháng)無比，你不得(de)不多(duō)考慮更多(duō)可(kě)能出現這(zhè)種問題補救措施，雖然你知道千篇一律來(lái)兼容它們，但是你會煩得(de)要命。
具體嵌套寫法
遵循上面得(de)嵌套方式，然後在CSS 裏面告訴 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不讓
标記的(de)最前方顯示圓點或者數字等目錄類型的(de)标記，因爲IE和(hé)Firefox顯示出來(lái)默認效果有些不一樣。因此這(zhè)樣不需要做(zuò)任何手腳，你的(de)IE6、和(hé)IE7、Firefox顯示出來(lái)的(de)東西(外距，間距，高(gāo)度，寬度)就幾乎沒什(shén)麽區(qū)别了(le)，也(yě)許細心的(de)你會在某一個(gè)時(shí)刻發現：兩個(gè)象素的(de)差别，但那已經很完美(měi)了(le)，不需要你通(tōng)過調整大(dà)片的(de)CSS來(lái)控制它們的(de)顯示了(le)，你願意，你可(kě)以僅僅兼容一兩個(gè)地方，而且通(tōng)常這(zhè)種兼容可(kě)以适應各種地方，不需要你重複在不同的(de)地方調試不同的(de)兼容方式–減輕你的(de)煩。你可(kě)以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的(de)方式方便的(de)整理(lǐ)出你要兼容的(de)地方，而統一兼容。嘗試一下(xià)吧，再也(yě)不要亂嵌套了(le)，雖然在Div+CSS的(de)方式下(xià)你幾乎可(kě)以想怎麽嵌套就怎麽嵌套，但是按照(zhào)上面的(de)規律你将輕松很多(duō)，從而事半功倍！
六、CSS兼容要點分(fēn)析IE vs FF
CSS 兼容要點：
DOCTYPE 影(yǐng)響 CSS 處理(lǐ)
FF: div 設置 margin-left, margin-right 爲 auto 時(shí)已經居中, IE 不行
FF: body 設置 text-align 時(shí), div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可(kě)居中
FF: 設置 padding 後, div 會增加 height 和(hé) width, 但 IE 不會, 故需要用(yòng) !important 多(duō)設一個(gè) height 和(hé) width
FF: 支持 !important, IE 則忽略, 可(kě)用(yòng) !important 爲 FF 特别設置樣式
div 的(de)垂直居中問題: vertical-align:middle; 将行距增加到和(hé)整個(gè)DIV一樣高(gāo) line-height:200px; 然後插入文字，就垂直居中了(le)。缺點是要控制内容不要換行
cursor: pointer 可(kě)以同時(shí)在 IE FF 中顯示遊标手指狀， hand 僅 IE 可(kě)以
FF: 鏈接加邊框和(hé)背景色，需設置 display: block, 同時(shí)設置 float: left 保證不換行。參照(zhào) menubar, 給 a 和(hé) menubar 設置高(gāo)度是爲了(le)避免底邊顯示錯位, 若不設 height, 可(kě)以在 menubar 中插入一個(gè)空格XHTML+CSS兼容性解決方案小集
使用(yòng)XHTML＋CSS構架好處不少，但也(yě)确實存在一些問題，不論是因爲使用(yòng)不熟練還(hái)是思路不清晰，我就先把一些我遇到的(de)問題寫在下(xià)面，省的(de)大(dà)家四處找^^
1、在mozilla firefox和(hé)IE中的(de)BOX模型解釋不一緻導緻相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這(zhè)兩個(gè)margin的(de)順序一定不能寫反，據阿捷的(de)說法!important這(zhè)個(gè)屬性IE不能識别，但别的(de)浏覽器可(kě)以識别。所以在IE下(xià)其實解釋成這(zhè)樣：
div{maring:30px;margin:28px}
重複定義的(de)話(huà)按照(zhào)最後一個(gè)來(lái)執行，所以不可(kě)以隻寫margin:XXpx!important;
2、IE5 和(hé)IE6的(de)BOX解釋不一緻IE5下(xià)div{width:300px;margin:0 10px 0 10px;}div的(de)寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的(de)寬度爲280px，而在IE6和(hé)其他(tā)浏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來(lái)計算(suàn)的(de)。這(zhè)時(shí)我們可(kě)以做(zuò)如下(xià)修改
div{width:300px!important;width :340px;margin:0 10px 0 10px}
，關于這(zhè)個(gè)是什(shén)麽我也(yě)不太明(míng)白，隻知道IE5和(hé)firefox都支持但IE6不支持，如果有人(rén)理(lǐ)解的(de)話(huà)，請告訴我一聲，謝了(le)！：）
3、ul标簽在Mozilla中默認是有padding值的(de),而在IE中隻有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大(dà)部分(fēn)問題。
4、關于腳本，在xhtml1.1中不支持language屬性，隻需要把代碼改爲
< type=”text/java”>
就可(kě)以了(le)
七、10個(gè)你未必知道的(de)CSS技巧
1、CSS字體屬性簡寫規則
一般用(yòng)CSS設定字體屬性是這(zhè)樣做(zuò)的(de)：
以下(xià)爲引用(yòng)的(de)内容：font-weight:bold;font-style:italic;font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也(yě)可(kě)以把它們全部寫到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不錯！隻有一點要提醒的(de)：這(zhè)種簡寫方法隻有在同時(shí)指定font-size和(hé)font-family屬性時(shí)才起作用(yòng)。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他(tā)們會使用(yòng)缺省值，這(zhè)點要記上。
2、同時(shí)使用(yòng)兩個(gè)類
一般隻能給一個(gè)元素設定一個(gè)類（Class），但這(zhè)并不意味著(zhe)不能用(yòng)兩個(gè)。事實上，你可(kě)以這(zhè)樣：
…
同時(shí)給P元素兩個(gè)類，中間用(yòng)空格格開，這(zhè)樣所有text和(hé)side兩個(gè)類的(de)屬性都會加到P元素上來(lái)。如果它們兩個(gè)類中的(de)屬性有沖突的(de)話(huà)，後設置的(de)起作用(yòng)，即在CSS文件中放在後面的(de)類的(de)屬性起作用(yòng)。
補充：對(duì)于一個(gè)ID，不能這(zhè)樣寫
…
也(yě)不能這(zhè)樣寫
3、CSS border的(de)缺省值
通(tōng)常可(kě)以設定邊界的(de)顔色，寬度和(hé)風格，如：
border: 3px solid #000
這(zhè)位把邊界顯示成3像素寬，黑(hēi)色，實線。但實際上這(zhè)裏隻需要指定風格即可(kě)。
如果隻指定了(le)風格，其他(tā)屬性就會使用(yòng)缺省值。一般地，Border的(de)寬度缺省是medium，一般等于3到4個(gè)像素；缺省的(de)顔色是其中文字的(de)顔色。如果這(zhè)個(gè)值正好合适的(de)話(huà)，就不用(yòng)設那麽多(duō)了(le)。
4、CSS用(yòng)于文檔打印
許多(duō)網站上都有一個(gè)針對(duì)打印的(de)版本，但實際上這(zhè)并不需要，因爲可(kě)以用(yòng)CSS來(lái)設定打印風格。
也(yě)就是說，可(kě)以爲頁面指定兩個(gè)CSS文件，一個(gè)用(yòng)于屏幕顯示，一個(gè)用(yòng)于打印：
第1行就是顯示，第2行是打印，注意其中的(de)media屬性。
但應該在打印CSS中寫什(shén)麽東西呢(ne)？你可(kě)以按設計普通(tōng)CSS的(de)方法來(lái)設定它。設計的(de)同時(shí)就可(kě)以把這(zhè)個(gè)CSS設成顯示CSS來(lái)檢查它的(de)效果。也(yě)許你會使用(yòng) display: none 這(zhè)個(gè)命令來(lái)關掉一些裝飾圖片，再關掉一些導航按鈕。要想了(le)解更多(duō)，可(kě)以看“打印差異”這(zhè)一篇。
5、圖片替換技巧
一般都建議(yì)用(yòng)标準的(de)HTML來(lái)顯示文字，而不要使用(yòng)圖片，這(zhè)樣不但快(kuài)，也(yě)更具可(kě)讀性。但如果你想用(yòng)一些特殊字體時(shí)，就隻能用(yòng)圖片了(le)。
比如你想整個(gè)賣東西的(de)圖标，你就用(yòng)了(le)這(zhè)個(gè)圖片：
這(zhè)當然可(kě)以，但對(duì)搜索引擎來(lái)說，和(hé)正常文字相比，它們對(duì)alt裏面的(de)替換文字幾乎沒有興趣這(zhè)是因爲許多(duō)設計者在這(zhè)裏放許多(duō)關鍵詞來(lái)騙搜索引擎。所以方法應該是這(zhè)樣的(de)：
Buy widgets
但這(zhè)樣就沒有特殊字體了(le)。要想達到同樣效果，可(kě)以這(zhè)樣設計CSS：
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的(de)圖片的(de)高(gāo)度。這(zhè)裏，圖片會當作背景顯示出來(lái)，而真正的(de)文字由于設定了(le)-2000像素這(zhè)個(gè)縮進，它們會出現在屏幕左邊2000點的(de)地方，就看不見了(le)。但這(zhè)對(duì)于關閉圖片的(de)人(rén)來(lái)說，可(kě)能全部看不到了(le)，這(zhè)點要注意。
6、CSS box模型的(de)另一種調整技巧
這(zhè)個(gè)Box模型的(de)調整主要是針對(duì)IE6之前的(de)IE浏覽器的(de)，它們把邊界寬度和(hé)空白都算(suàn)在元素寬度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
這(zhè)樣調用(yòng)它：
…
這(zhè)時(shí)盒子的(de)全寬應該是150點，這(zhè)在除IE6之前的(de)IE浏覽器之外的(de)所有浏覽器上都是正确的(de)。但在IE5這(zhè)樣的(de)浏覽器上，它的(de)全寬仍是100點。可(kě)以用(yòng)以前人(rén)發明(míng)的(de)Box調整方法來(lái)處理(lǐ)這(zhè)種差異。
但用(yòng)CSS也(yě)可(kě)以達到同樣的(de)目的(de)，讓它們顯示效果一緻。
#box { width: 150px } #box div { border: 5px; padding: 20px }
這(zhè)樣調用(yòng)：
…
這(zhè)樣，不管什(shén)麽浏覽器，寬度都是150點了(le)。
7、塊元素居中對(duì)齊
如果想做(zuò)個(gè)固定寬度的(de)網頁并且想讓網頁水(shuǐ)平居中的(de)話(huà)，通(tōng)常是這(zhè)樣：
#content { width: 700px; margin: 0 auto }
你會使用(yòng)
來(lái)圍上所有元素。這(zhè)很簡單，但不夠好，IE6之前版本會顯示不出這(zhè)種效果。改CSS如下(xià)：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這(zhè)會把網頁内容都居中，所以在Content中又加入了(le)
text-align: left 。
8、用(yòng)CSS來(lái)處理(lǐ)垂直對(duì)齊
垂直對(duì)齊用(yòng)表格可(kě)以很方便地實現，設定表格單元 vertical-align: middle 就可(kě)以了(le)。但對(duì)CSS來(lái)說這(zhè)沒用(yòng)。如果你想設定一個(gè)導航條是2em高(gāo)，而想讓導航文字垂直居中的(de)話(huà)，設定這(zhè)個(gè)屬性是沒用(yòng)的(de)。
CSS方法是什(shén)麽呢(ne)？對(duì)了(le)，把這(zhè)些文字的(de)行高(gāo)設爲 2em：line-height: 2em ，這(zhè)就可(kě)以了(le)。
9、CSS在容器内定位
CSS的(de)一個(gè)好處是可(kě)以把一個(gè)元素任意定位，在一個(gè)容器内也(yě)可(kě)以。比如對(duì)這(zhè)個(gè)容器：
#container { position: relative }
這(zhè)樣容器内所有的(de)元素都會相對(duì)定位，可(kě)以這(zhè)樣用(yòng)：
…
如果想定位到距左30點，距上5點，可(kě)以這(zhè)樣：
#navigation { position: absolute; left: 30px; top: 5px }
當然，你還(hái)可(kě)以這(zhè)樣：
margin: 5px 0 0 30px
注意4個(gè)數字的(de)順序是：上、右、下(xià)、左。當然，有時(shí)候定位的(de)方法而不是邊距的(de)方法更好些。
10、直通(tōng)到屏幕底部的(de)背景色
在垂直方向是進行控制是CSS所不能的(de)。如果你想讓導航欄和(hé)内容欄一樣直通(tōng)到頁面底部，用(yòng)表格是很方便的(de)，但如果隻用(yòng)這(zhè)樣的(de)CSS：
#navigation { background: blue; width: 150px }
較短的(de)導航條是不會直通(tōng)到底部的(de)，半路内容結束時(shí)它就結束了(le)。該怎麽辦呢(ne)？
不幸的(de)是，隻能采用(yòng)欺騙的(de)手段了(le)，給這(zhè)較短的(de)一欄加上個(gè)背景圖，寬度和(hé)欄寬一樣，并讓它的(de)顔色和(hé)設定的(de)背景色一樣。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此時(shí)不能用(yòng)em做(zuò)單位，因爲那樣的(de)話(huà)，一旦讀者改變了(le)字體大(dà)小，這(zhè)個(gè)花招就會露餡，隻能使用(yòng)px。
，然後再是
，當然
裏面又可(kě)以嵌套
什(shén)麽的(de)，但是并不建議(yì)你嵌套很多(duō)東西。當你符合這(zhè)樣的(de)規則的(de)時(shí)候，那些倒黴的(de)，不聽(tīng)話(huà)的(de)間隙就不會在裏面出現了(le)，當你僅僅是
