網頁美工設計

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

編輯：時間：2015-09-09 16:58:28

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