| //顯示屬性
程序代碼： .class{
可簡單解決IE與FF之間的兼容問題（保持FF,IE7,IE的順序），但這種方式貌似對加載有一定的影響 ！  Update2007-12-31 NND快被Opera個丫的折騰崩潰了: .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 對于 IE8 beta1 可以嘗試下面的 Hack： /*/ selector { … } /**/ 此規(guī)則僅 IE8 beta1 識別，而其他 A-grade 瀏覽器都不識別 >>>------我想分頁！--這么長的文章，在這里來個分頁多好啊！哈哈-------<<< Description: IE支持自定義光標文件cursor:url() IE支持自定義滾動條顏色風格 IE6中的select有永遠處在最上的bug,而且css對select不起作用。 在form中，IE支持label，包括文字和圖片；但是firefox不支持圖片的label， 點擊圖片不能讓label for的radio或者checkbox產生效果。 IE和firefox都是支持onscroll事件的，但是firefox中textarea對此事件不支持。 CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持 firefox支擇相鄰子選擇符“>”，而IE6不支持（IE7支持） firefox 對display的inline-block不支持，而IE均支持。 >>>------我想分頁！--這么長的文章，在這里來個分頁多好?。」?------<<< 以下收藏自：puterjam's Blog 區(qū)別IE6與FF： background:orange;*background:blue; 區(qū)別IE6與IE7： background:green !important;background:blue; 區(qū)別IE7與FF： background:orange; *background:green; 區(qū)別FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 注：IE都能識別*;標準瀏覽器(如FF)不能識別*； IE6能識別*，但不能識別 !important, IE7能識別*，也能識別!important; FF不能識別*，但能識別!important; IE6 IE7 FF * √ √ × !important × √ √ -------------------------------------------------------------------------------- 另外再補充一個，下劃線"_", IE6支持下劃線，IE7和firefox均不支持下劃線。(推薦) 于是大家還可以這樣來區(qū)分IE6，IE7，firefox : background:orange;*background:green;_background:blue; 注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。 >>>------我想分頁！--這么長的文章，在這里來個分頁多好??！哈哈-------<<< 這是國外摘來的一張CSS hack列表，顯示了各瀏覽器對css hack的支持程度，對制作兼容網頁非常有幫助。 >>>------我想分頁！--這么長的文章，在這里來個分頁多好?。」?------<<< 找了一些相關的CSS HACK后，總結的幾個方法。 IE7的hack IE7 修復了很多 bug，也增加了對一些選擇符的支持，所以現(xiàn)在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現(xiàn)在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發(fā)現(xiàn)了一些針對 IE7 的 CSS Hack，具體就是： >body html* *+html 這三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準兼容瀏覽器中被被忽略，但是 IE7 卻不這么認為。對于 >body ，它會將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body，而且不光對于 > 選擇符，+,~ 選擇符中這個現(xiàn)象也存在。對于 html* ，由于 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這里有一個空格。對于第三種 *+html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校驗器的驗證，因此也是作者推薦的 hack 用法。 引用的其他朋友的總結： 屏蔽IE瀏覽器（也就是IE下不顯示） *:lang(zh) select {font:12px !important;} select:empty {font:12px !important;} 這里select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。 僅IE7識別 *+html {…} 當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。 IE6及IE6以下識別 * html {…} 這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。 html/**/ >body select {……} 這句與上一句的作用相同。 用法： *html #box{…} 僅IE6不識別 #box { display /*IE6不識別*/:none;} 這里主要是通過CSS注釋分開一個屬性與值，流釋在冒號前。 僅IE6與IE5不識別 #box/**/ { display /*IE6,IE5不識別*/:none;} 這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。 僅IE5不識別 select/*IE5不識別*/ { display:none;} 這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識別 盒模型解決方法 selct {width:IE5.x寬度; voice-family :”\”}\””; voice-family:inherit; width:正確寬度;} 盒模型的清除方法不是通過!important來處理的。這點要明確。 清除浮動 select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。 節(jié)字省略號 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結尾，很好的一個技術。只是目前Firefox并不支持。 只有Opera識別 @media all and (min-width: 0px){ select {……} } 針對Opera瀏覽器做單獨的設定。 IE5.x的過濾器，只有IE5.x可見 @media tty { i{content:”\”;}} @import ‘ie5win.css’; IE5/MAC的過濾器，一般用不著 >>>------我想分頁！--這么長的文章，在這里來個分頁多好??！哈哈-------<<< IE與Firefox的CSS兼容隨記 CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。 常見兼容問題： 1.DOCTYPE 影響 CSS 處理 2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行 3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width 5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式 6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行 7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以 8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。 9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法： div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣： div{maring:30px;margin:28px} 重復定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important; 10.IE5 和IE6的BOX解釋不一致 IE5下 
 div{width:300px;margin:0 10px 0 10px;}
ul{margin:0;padding:0;}
 <#div id="floatA" ></#div> <#div id="floatB" ></#div> <#div id="NOTfloatC" ></#div>
<#div class="floatB"></#div> <#div class="NOTfloatC"></#div>
<#div class="clear"></#div>
.clear{ clear:both;} 此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden; .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
#IamFloat{ float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/}
|
