轉(zhuǎn):
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),伊吾企業(yè)網(wǎng)站建設(shè),伊吾品牌網(wǎng)站建設(shè),網(wǎng)站定制,伊吾網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,伊吾網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
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下面顯示的綠色*/
在這里，我想說(shuō)一下，雖然兼容給你帶來(lái)很多郁悶，讓人心煩，但同時(shí)，在你做多了后，你會(huì)發(fā)現(xiàn)，兼容有時(shí)候會(huì)滿足你很多不好達(dá)到的效果，就像最后一個(gè)，要做那種效果，不用兼容的方法，那你就JS去吧，JS還得想想FF和IE下的不同，當(dāng)然，JS的兼容，我也不會(huì)，我沒(méi)去研究過(guò)。以后的事，先把CSS+DIV學(xué)熟再說(shuō)。
多做，做練，始終把盒子模型放在心中，才會(huì)熟練，才會(huì)運(yùn)用自如，才會(huì)在做的時(shí)候，自然而然就知道哪里會(huì)有兼容問(wèn)題，直接在測(cè)試前就解決掉那些最常見(jiàn)的兼容問(wèn)題。
DIV+CSS設(shè)計(jì)時(shí)IE6、IE7、FF 與兼容性有關(guān)的特性
在網(wǎng)站設(shè)計(jì)的時(shí)候，應(yīng)該注意css樣式兼容不同瀏覽器問(wèn)題，特別是對(duì)完全使用DIV CSS設(shè)計(jì)的網(wǎng)，就應(yīng)該更注意IE6 IE7 FF對(duì)CSS樣式的兼容，不然，你的網(wǎng)亂可能出去不想出現(xiàn)的效果！
所有瀏覽器 通用
height: 100px;
IE6 專(zhuān)用
_height: 100px;
IE6 專(zhuān)用
*height: 100px;
IE7 專(zhuān)用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下兩種方法幾乎能解決現(xiàn)今所有兼容.
1, !important (不是很推薦，用下面的一種感覺(jué)最安全)
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的兼容.(注意寫(xiě)法.記得該聲明位置需要提前.)
代碼:
style
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
/style
2, IE6/IE77對(duì)FireFox from 針對(duì)firefox ie6 ie7的css樣式
*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.
代碼:
style
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
/style
注意:
*+html 對(duì)IE7的兼容 必須保證HTML頂部有如下聲明：
代碼:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
二、萬(wàn)能 float 閉合(非常重要!) 可以用這個(gè)解決多個(gè)div對(duì)齊時(shí)的間距不對(duì)，
關(guān)于 clear float 的原理可參見(jiàn) [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
代碼:
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
三、其他兼容技巧(相當(dāng)有用)
1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決)
2, 居中問(wèn)題.
1).垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) vetical-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的兼容，有許多朋友問(wèn)過(guò)IE7的兼容是什么，其實(shí)我也不知道。暫時(shí)還沒(méi)找到IE7專(zhuān)用的兼容。除了前面那片文章，《針對(duì)firefox ie6 ie7的css樣式》中的兼容方式也是很好用的。
有一點(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)兼容，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋?zhuān)瑫?huì)導(dǎo)致頁(yè)面 沒(méi)按要求顯示！找到一個(gè)針對(duì)IE7不錯(cuò)的兼容方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了現(xiàn)在寫(xiě)一個(gè)CSS可以這樣：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/
那么在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;
5 IE與寬度和高度的問(wèn)題
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;}htmlbody #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁(yè)面的最小寬度
min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(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:e-xpression(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)
.兼容box{
display:table;
//將對(duì)象作為塊元素級(jí)的表格顯示
}
或者
.兼容box{
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]{}
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”
pp對(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ī)則。就是divulli的三角關(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ě)法
遵循上面得嵌套方式，divulli/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)試不同的兼容方式–減輕你的煩。你可以u(píng)l.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統(tǒng)一兼容。嘗試一下吧，再也不要亂嵌套了，雖然在Div+CSS的方式下你幾乎可以想怎么嵌套 就怎么嵌套，但是按照上面的規(guī)律你將輕松很多，從而事半功倍！
1.H5網(wǎng)頁(yè)touch滑動(dòng)的時(shí)候在蘋(píng)果手機(jī)上出現(xiàn)不流暢的問(wèn)題
-webkit-overflow-scrolling 用來(lái)控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.
解決辦法：給所有網(wǎng)頁(yè)添加如下樣式
說(shuō)明：
-webkit-overflow-scrolling: touch; 當(dāng)手指從觸摸屏上移開(kāi)，會(huì)保持一段時(shí)間的滾動(dòng)
-webkit-overflow-scrolling: auto; 當(dāng)手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì)立即停止
2. css 蘋(píng)果手機(jī)按鈕默認(rèn)樣式如何去掉
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
textarea { -webkit-appearance: none;}
3. 如果還有圓角的問(wèn)題，
** 4.蘋(píng)果手機(jī)不支持box-shadow屬性**
如果先給input寫(xiě)邊框，用 border:1px solid #ccc;
5、去除Chrome等瀏覽器文本框默認(rèn)發(fā)光邊框
6.去掉高光樣式：
當(dāng)然這樣以來(lái)，當(dāng)文本框載入焦點(diǎn)時(shí)，所有瀏覽器下的文本框的邊框都不會(huì)有顏色上及樣式上的變化了，這樣的話，當(dāng)文本框載入焦點(diǎn)時(shí)，邊框顏色就會(huì)變?yōu)槌壬o用戶一個(gè)反饋。
7、去除IE10+瀏覽器文本框后面的小叉叉，只需下面一句就ok了
input::-ms-clear {display: none;}
8.H5頁(yè)面寫(xiě)出來(lái)，在chrome中出現(xiàn)如下錯(cuò)誤，只需添加如下css即可解決
*{touch-action: pan-y;}
解決兼容性問(wèn)題，可以使用一些特殊的優(yōu)先符號(hào)，和一些特殊的東東來(lái)設(shè)置
例如
!important
#wrapper
{
width:
120px;
}
/*
FireFox
*/
*html
#wrapper
{
width:
80px;}
/*
ie6
fixed
*/
*+html
#wrapper
{
width:
60px;}
/*
ie7
fixed,
注意順序
*/
等等方式~
這個(gè)一定要靠多查看，多調(diào)試才OK的~經(jīng)驗(yàn)越多，調(diào)試越少~~~~~~
瀏覽器方面，安裝IETester，IE8，F(xiàn)F最新版，opera最新版，這樣就可以做好本地調(diào)試。
到你的網(wǎng)站完全兼容這些瀏覽器的時(shí)候再做個(gè)遠(yuǎn)程測(cè)試，網(wǎng)址
遠(yuǎn)程測(cè)試必須在服務(wù)器上進(jìn)行。
1.目前來(lái)說(shuō)對(duì)css支持最好的公認(rèn)的是火狐瀏覽器，錯(cuò)位的原因在css代碼書(shū)寫(xiě)不規(guī)范。
2.兼容性：對(duì)于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對(duì)于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁(yè)面制作的過(guò)程中需要針對(duì)不同瀏覽器版本進(jìn)行測(cè)試，以保證兼容性，無(wú)形中也增加很多工作量（至少我接觸的開(kāi)發(fā)人員制作div頁(yè)面比table頁(yè)面的標(biāo)準(zhǔn)時(shí)間要長(zhǎng)一些）。
3.對(duì)css縮寫(xiě)的支持問(wèn)題：
不論是ie 還是ff對(duì)css的縮寫(xiě)都有一小點(diǎn)問(wèn)題比如border: 0xp solid #fff;兩個(gè)瀏覽器支持都沒(méi)有問(wèn)題
但對(duì)于四個(gè)邊的magin不同情況下，就不能用這種縮寫(xiě)了，無(wú)論是ie還是ff又會(huì)出現(xiàn)邊界解釋錯(cuò)誤，而導(dǎo)致頁(yè)面變形正確縮寫(xiě)：border-width:0px 1px 2px 3px;
border-style:solid;
border-color:#fff;
第二點(diǎn)是 ie對(duì)于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫(xiě)上，以免ff在瀏覽中的錯(cuò)位。
IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理
2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行
3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
6.div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。
9.在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}
重慶分公司
重慶分公司
