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