【正文】 ight: 100px !important。在網(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。當(dāng)它們讀到*height200px的時(shí)候就停下了，因?yàn)樗鼈儾徽J(rèn)識(shí)_height。_height:100px。我很少使用hacker的，可能是個(gè)人習(xí)慣吧，我不喜歡寫的代碼IE不兼容，然后用hack來(lái)解決。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會(huì)出現(xiàn)兼容問(wèn)題以及怎么去解決這些兼容問(wèn)題。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問(wèn)題。 overflow:visible。去掉這個(gè)間距使用float是正道。不過(guò)因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。display:table。出現(xiàn)這個(gè)問(wèn)題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。將其轉(zhuǎn)化為行內(nèi)屬性　　備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問(wèn)題。其實(shí)他們碰到的兼容性問(wèn)題大部分不應(yīng)該歸咎于瀏覽器，而是他們的技術(shù)本身了。代碼為什么這么寫還不知所以然。　　在學(xué)習(xí)瀏覽器兼容性之前，我想把前端開(kāi)發(fā)人員劃分為兩類：　　第一類是精確按照設(shè)計(jì)圖開(kāi)發(fā)的前端開(kāi)發(fā)人員，可以說(shuō)是精確到1px的，他們很容易就會(huì)發(fā)現(xiàn)設(shè)計(jì)圖的不足，并且在很少的情況下會(huì)碰到瀏覽器的兼容性問(wèn)題，而這些問(wèn)題往往都死瀏覽器的bug，并且他們制作的頁(yè)面后期易維護(hù)，代碼重用問(wèn)題少，可以說(shuō)是比較牢固放心的代碼。常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案　　所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況?！　〉诙愂腔景凑赵O(shè)計(jì)圖來(lái)開(kāi)發(fā)的前端開(kāi)發(fā)人員，很多細(xì)枝末節(jié)差距很大，不如間距，行高，圖片位置等等經(jīng)常會(huì)差幾px。這類開(kāi)發(fā)人員往往經(jīng)常為兼容性問(wèn)題所困?！　∥恼轮饕槍?duì)的是第一類，嚴(yán)謹(jǐn)型的開(kāi)發(fā)人員，因此這里主要從瀏覽器解析差異的角度來(lái)分析兼容性問(wèn)題?！　g覽器兼容問(wèn)題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度　　問(wèn)題癥狀：IE7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度　　碰到頻率：60%　　解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高?！　渥ⅲ盒袃?nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block。這時(shí)候我們還需要在display:inline后面加入display:talbe。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問(wèn)題的用法，所以我禁止他們使用）　　瀏覽器兼容問(wèn)題六：標(biāo)簽最低高度設(shè)置minheight不兼容　　問(wèn)題癥狀：因?yàn)閙inheight本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置minheight時(shí)不能很好的被各個(gè)瀏覽器兼容　　碰到幾率：5%　　解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{minheight:200px。}　　備注：在B/S系統(tǒng)前端開(kāi)時(shí)，有很多情況下我們又這種需求。　　瀏覽器兼容問(wèn)題七：透明度的兼容CSS設(shè)置　　做兼容頁(yè)面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒(méi)這么麻煩了。1. /*不過(guò)hacker還是非常好用的。所以它們會(huì)把高度解析為200px，剩下的瀏覽器只認(rèn)識(shí)第一個(gè)height:300px。 IE6 專用 _height: 100px。一、CSS 兼容 以下兩種方法幾乎能解決現(xiàn)今所有兼容. 1, !important (不是很推薦，用下面的一種感覺(jué)最安全) 隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的兼容.(.) 代碼: style wrapper { width: 100px!important。} /* ie6 fixed */ *+html wrapper { width: 60px。 clear:both。} /* 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). lineheight 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) veticalalign: middle.( 注意內(nèi)容不要換行.) 2).水平居中. margin: 0 auto。 width: 40px。 } /* IE6 */ *html .submitbutton { margintop: 21px。這下就和諧了。 有一點(diǎn)邏輯思想的人都會(huì)知道可以用IE和FF的兼容結(jié)合起來(lái)使用，下面介紹三個(gè)兼容，例如：（適合新手，呵呵，高手就在這里路過(guò)吧。 介紹完了這三個(gè)兼容了，下面我們?cè)賮?lái)看看如何在一個(gè)樣式里分別給一個(gè)屬性定義IE6 IE7 FF專用的兼容，看下面的代碼，順序不能錯(cuò)哦： 程序代碼 height:100px。 在IE7下，第三個(gè)屬性IE7不認(rèn)識(shí)，所以它讀第2個(gè)屬性，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性，所以IE7最終讀出的是第2個(gè)屬性 *height:120px。 } /* IE6 */ *+html 1 { color: 999。 MARGINLEFT: auto。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGINRIGHT: auto。 就可以了。 //for ff+ width /**/:500px。 //這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline。 //可以為內(nèi)嵌元素模擬為塊元素 display:inline。比如要設(shè)置背景圖片，這個(gè)寬度是比較重 要的。 height: auto。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把 width當(dāng)做最小寬度來(lái)使。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。這種的最麻煩的 ……box:after{ content: “.”。 visibility: hidden。 width:800px。 } *html left{ marginright:3px。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。marginbottom: 20px。}或者為DIV加上border屬性。第二句是MAC上safari瀏覽器獨(dú)有的。 html/**/ body select {……} 這句與上一句的作用相同。} 這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。 voicefamily :}。這點(diǎn)要明確。 clear:both。 textoverflow:ellipsis。 只有Opera識(shí)別 media all and (minwidth: 0px){ select {……} } 針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。/* */}} import ’’。把需要兼容的地方單獨(dú)放到一個(gè)文件里面，當(dāng)瀏覽器版本符合的時(shí)候就可以調(diào)用那個(gè)被兼容的樣式，這樣不僅使用起來(lái) 非常方便，而且對(duì)于制作這個(gè)CSS本身來(lái)講，可以更嚴(yán)格的觀察到是否有必要使用兼容，很多情況下，當(dāng)我本人寫CSS如果把全部代碼包括兼容都寫到一個(gè) CSS文件的時(shí)候的時(shí)候會(huì)很隨意，想怎么兼容就怎么兼容，而你獨(dú)立出來(lái)寫的時(shí)候，你就會(huì)不自覺(jué)的考慮是否有必要兼容，是先兼容 CSS？還是先把主CSS里面的東西調(diào)整到盡可能的不需要兼容？當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話的時(shí)候，你是不是很有成就感呢？你知道怎么選 擇了吧～～呵呵 IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋 Only IE 所有的IE可識(shí)別 Only IE + 僅IE6可識(shí)別 Only IE 7/ 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ù)雜的模版下面使用的兼容 少得可憐。就是divulli的三角關(guān)系。 具體嵌套寫法 遵循上面得嵌套方式，divulli/li/ul/div 然后在CSS 里面告訴 ul {Margin:0pxadding:0px。 } 這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。這些過(guò)濾器有的是寫在 CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。} }/* */ IE5/MAC的過(guò)濾器，一般用不著 /**//*/ import 。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。當(dāng)你符合這樣的規(guī)則的時(shí)候，那些倒霉的，不聽(tīng)話的間隙就不會(huì)在里面出現(xiàn)了，當(dāng)你僅僅是div里面放li，而不 用ul的時(shí)候，你會(huì)發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6和IE7會(huì)憑空多一些間距。}，其中l(wèi)iststyle:none是不讓li標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類型的標(biāo)記，因?yàn)镮E和 Firefox顯示出來(lái)默認(rèn)效果有些不一樣。 只有Opera識(shí)別 media all and (minwidth: 0px){ select {……} } 針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。/* */}} import ’’。把需要兼容的地方單獨(dú)放到一個(gè)文件里面，當(dāng)瀏覽器版本符合的時(shí)候就可以調(diào)用那個(gè)被兼容的樣式，這樣不僅使用起來(lái) 非常方便，而且對(duì)于制作這個(gè)CSS本身來(lái)講，可以更嚴(yán)格的觀察到是否有必要使用兼容，很多情況下，當(dāng)我本人寫CSS如果把全部代碼包括兼容都寫到一個(gè) CSS文件的時(shí)候的時(shí)候會(huì)很隨意，想怎么兼容就怎么兼容，而你獨(dú)立出來(lái)寫的時(shí)候，你就會(huì)不自覺(jué)的考慮是否有必要兼容，是先兼容 CSS？還是先把主CSS里面的東西調(diào)整到盡可能的不需要兼容？當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話的時(shí)候，你是不是很有成就感呢？你知道怎么選 擇了吧～～呵呵 IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋 Only IE 所有的IE可識(shí)別 Only IE + 僅IE6可識(shí)別 Only IE 7/ 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ù)雜的模版下面使用的兼容 少得可憐。就是divulli的三角關(guān)系。 具體嵌套寫法 遵循上面得嵌套方式，divulli/li/ul/div 然后在CSS 里面告訴 ul {Margin:0pxadding:0px。, , {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統(tǒng)一兼容。/div其中height:2px為你要設(shè)的高度，overflow:hidden最為關(guān)鍵，他就是幫你去掉默認(rèn)高度隨著最新CSS的不斷完善，越來(lái)越多的網(wǎng)站采用DIV+CSS布局。但是隨著CSS標(biāo)準(zhǔn)的進(jìn)一步完善，瀏覽器將最終都會(huì)遵循這個(gè)標(biāo)準(zhǔn)，到時(shí)候?qū)慏IV+CSS布局的頁(yè) 面就不那么麻煩了。 1). lineheight 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) verticalalign: middle.( 注意內(nèi)容不要換行.)　　(常見(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)有 liststyle 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)　　6 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: .　　7 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE.針對(duì)firefox ie6 ie7的css樣式　　現(xiàn)在大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，　　但是ie7對(duì)!important可以正確解釋，會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示!找到一個(gè)針　　對(duì)IE7不錯(cuò)的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一