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