DIV+CSS兼容性的解決方法大全

這句與上一句的作用相同。
僅IE6不識別
select { display :none;}
這里主要是通過(guò)CSS注釋分開(kāi)一個(gè)屬性與值，流釋在冒號前。
僅IE6與IE5不識別
select { display :none;}
這里與上面一句不同的是在選擇符與花括號之間多了一個(gè)CSS注釋。
僅IE5不識別
select { display:none;}
這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別
盒模型解決方法
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)時(shí)，那么父級的高度就無(wú)法完全的包住整個(gè)子級，那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來(lái)對父級做一次定義，那么就可以解決這個(gè)問(wèn)題。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
這個(gè)是在越出長(cháng)度后會(huì )自行的截掉多出部分的文字，并以省略號結尾，很好的一個(gè)技術(shù)。只是目前Firefox并不支持。
只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以上都是寫(xiě)CSS中的一些兼容，建議遵循正確的標簽嵌套(div ul li 嵌套結構關(guān)系)，這樣可以減少你使用兼容的頻率，不要進(jìn)入理解誤區，并不是一個(gè)頁(yè)面就需要很多的兼容來(lái)保持多瀏覽器兼容)，很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好，這些都是用來(lái)解決局部的兼容性問(wèn)題，如果希望把兼容性的內容也分離出來(lái)，不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫(xiě)在CSS中通過(guò)過(guò)濾器導入特別的樣式，也有的是寫(xiě)在HTML中的通過(guò)條件來(lái)鏈接或是導入需要的補丁樣式。
IE5.x的過(guò)濾器，只有IE5.x可見(jiàn)
@media tty {
i{content:"";}} @import ’ie5win.css’;
IE5/MAC的過(guò)濾器，一般用不著(zhù)
下面是IE的條件注釋?zhuān)瑐€(gè)人覺(jué)得用條件注釋調用相應兼容是比較完美的多瀏覽器兼容的解決辦法。把需要兼容的地方單獨放到一個(gè)文件里面，當瀏覽器版本符合的時(shí)候就可以調用那個(gè)被兼容的樣式，這樣不僅使用起來(lái)非常方便，而且對于制作這個(gè)CSS本身來(lái)講，可以更嚴格的觀(guān)察到是否有必要使用兼容，很多情況下，當我本人寫(xiě)CSS如果把全部代碼包括兼容都寫(xiě)到一個(gè)CSS文件的時(shí)候的時(shí)候會(huì )很隨意，想怎么兼容就怎么兼容，而你獨立出來(lái)寫(xiě)的時(shí)候，你就會(huì )不自覺(jué)的考慮是否有必要兼容，是先兼容 CSS？還是先把主CSS里面的東西調整到盡可能的不需要兼容？當你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話(huà)的時(shí)候，你是不是很有成就感呢？你知道怎么選擇了吧～～呵呵
IE的if條件兼容自己可以靈活使用參看這篇IE條件注釋
Only IE
所有的IE可識別
只有IE5.0可以識別
Only IE 5.0+
IE5.0包換IE5.5都可以識別
僅IE6可識別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識別
Only IE 7/-
僅IE7可識別
Css 當中有許多的東西不不按照某些規律來(lái)的話(huà)，會(huì )讓你很心煩，雖然你可以通過(guò)很多的兼容，很多的!important 來(lái)控制它，但是你會(huì )發(fā)現長(cháng)此以往你會(huì )很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起來(lái)完美無(wú)缺是不是很羨慕？而他們看似復雜的模版下面使用的兼容少得可憐。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。不要你認為發(fā)現了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。
div ul li 的嵌套順序
今天只講一個(gè)規則。就是<div><ul><li>的三角關(guān)系。我的經(jīng)驗就是<div>在最外面，里面是<ul>，然后再是<li>，當然<li>里面又可以嵌套<div>什么的，但是并不建議你嵌套很多東西。當你符合這樣的規則的時(shí)候，那些倒霉的，不聽(tīng)話(huà)的間隙就不會(huì )在里面出現了，當你僅僅是<div>里面放<li>，而不用<ul>的時(shí)候，你會(huì )發(fā)現你的間隙十分難控制，一般情況下，IE6和IE7會(huì )憑空多一些間距。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內容又空了很大一塊，出現這種情況雖然你可以改變IE的Margin，然后調整Firefox下面的Padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得CSS將變得臭長(cháng)無(wú)比，你不得不多考慮更多可能出現這種問(wèn)題補救措施，雖然你知道千篇一律來(lái)兼容它們，但是你會(huì )煩得要命。
具體嵌套寫(xiě)法
遵循上面得嵌套方式，<div><ul><li></li></ul></div> 然后在CSS 里面告訴 ul {Margin:0px;Padding:0px;list-style.:none;}，其中list-style.:none是不讓<li>標記的最前方顯示圓點(diǎn)或者數字等目錄類(lèi)型的標記，因為IE和Firefox顯示出來(lái)默認效果有些不一樣。因此這樣不需要做任何手腳，你的IE6、和IE7、Firefox顯示出來(lái)的東西(外距，間距，高度，寬度)就幾乎沒(méi)什么區別了，也許細心的你會(huì )在某一個(gè)時(shí)刻發(fā)現一、兩個(gè)象素的差別，但那已經(jīng)很完美了，不需要你通過(guò)調整大片的CSS來(lái)控制它們的顯示了，你愿意，你可以?xún)H僅兼容一兩個(gè)地方，而且通常這種兼容可以適應各種地方，不需要你重復在不同的地方調試不同的兼容方式–減輕你的煩。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統一兼容。嘗試一下吧，再也不要亂嵌套了，雖然在Div+CSS的方式下你幾乎可以想怎么嵌套就怎么嵌套，但是按照上面的規律你將輕松很多，從而事半功倍！