一種css多瀏覽器兼容的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及Web前端開(kāi)發(fā)技術(shù)領(lǐng)域，特別涉及一種解決CSS多瀏覽器兼容的方法。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)的發(fā)展，頁(yè)面的設(shè)計(jì)越來(lái)越復(fù)雜化而且用戶體驗(yàn)要求也越來(lái)越高，如:當(dāng)我們使用不同的瀏覽器(Firefox IE7 IE6)訪問(wèn)同一個(gè)網(wǎng)站，或者頁(yè)面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問(wèn)題。有的顯示出來(lái)正常，有的顯示出來(lái)不正常，有的錯(cuò)位導(dǎo)致頁(yè)面的變形影響頁(yè)面整體效果，這對(duì)用戶體驗(yàn)不好。

【發(fā)明內(nèi)容】

[0003]本發(fā)明解決的技術(shù)問(wèn)題在于提供一種實(shí)現(xiàn)CSS多瀏覽器兼容的方法，解決各瀏覽器對(duì)CSS兼容產(chǎn)生差異的問(wèn)題。
[0004]本發(fā)明解決上述問(wèn)題的技術(shù)方案是:
[0005]通過(guò)<div>標(biāo)簽與css樣式組合來(lái)實(shí)現(xiàn)CSS的多瀏覽器兼容。
[0006]所述的方法包括以下步驟:
[0007]第I步、先建立html頁(yè)面和外部樣式表文件(.css)；
[0008]第2步、在html頁(yè)面鏈入外部css樣式表；
[0009]〈head〉
[0010]〈link rel = " stylesheet" type =" text/css" href =" style, css" >
[0011]〈/head〉
[0012]第3步、定義<div>標(biāo)簽同時(shí)設(shè)置class或id屬性；
[0013]第4步、根據(jù)不同瀏覽器需要，編寫對(duì)應(yīng)class的css樣式
[0014]第5步、在瀏覽器上打開(kāi)頁(yè)面，查看瀏覽器顯示的效果。
[0015]所述的根據(jù)不同瀏覽器需要，編寫對(duì)應(yīng)class的css樣式是:
[0016].select {color:#fc0 ! important ；} ! important 可被 FireFox 和 IE7 識(shí)別
[0017].select {*color:#fc0 ;} * 可被 IE6、IE7 識(shí)別
[0018].select {_color:#360 可被 IE6 識(shí)別
[0019].select {*+color:#36c ;}*+可被 IE7 識(shí)別
[0020]*html.select {color:#666 ;}/*IE6*/
[0021]*+html.select {color:#999 ;}/*IE7*/
[0022]針對(duì)Opera瀏覽器:
[0023]Omedia all and (min-width:0px) {.select {color:red ；}}
[0024]/*針對(duì)Chrome谷歌瀏覽器內(nèi)核支持的CSS樣式*/
[0025]Omedia screen and(-webkit-min-device-pixel-rat1:0) {
[0026].select {color:blue ；}}
[0027]針對(duì)Firefox瀏覽器的內(nèi)核CSS寫法:
[0028]1-moz-document ur 1-prefix () {.select {color:green ;}}。
[0029]本發(fā)明的有益效果是:通過(guò)常用的HTML標(biāo)簽組織和CSS樣式表來(lái)實(shí)現(xiàn)多瀏覽器兼容，用戶可以更靈活控制頁(yè)面布局，操作簡(jiǎn)單方便，結(jié)構(gòu)簡(jiǎn)潔明了，可以結(jié)構(gòu)化HTML，提高易用性，有效增強(qiáng)了用戶體驗(yàn)度。
【附圖說(shuō)明】
[0030]下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說(shuō)明:
[0031]圖1為本發(fā)明的方法流程圖。
【具體實(shí)施方式】
[0032]如圖1所示，本發(fā)明通過(guò)將HTML的常用標(biāo)簽<div>和CSS樣式表組合實(shí)現(xiàn)多瀏覽器的兼容，具體步驟如下:
[0033]第I步、先建立html頁(yè)面和外部樣式表文件(.css)；
[0034]第2步、在html頁(yè)面鏈入外部css樣式表；
[0035]〈head〉
[0036]〈link rel=" stylesheet" type = " text/css" href = " style, css" >
[0037]〈/head〉
[0038]第3步、定義<div>標(biāo)簽同時(shí)設(shè)置class或id屬性；
[0039]第4步、根據(jù)不同瀏覽器需要，編寫對(duì)應(yīng)class的css樣式
[0040]如:
[0041].select {color:#fc0 ! important ；} ! important 可被 FireFox 和 IE7 識(shí)別
[0042].select {*color:#fc0 ;}* 可被 IE6、IE7 識(shí)別
[0043].select {_color:#360 可被 IE6 識(shí)別
[0044].select {*+color:#36c ;}*+ 可被 IE7 識(shí)別
[0045]*html.select {color:#666 ;}/*IE6*/
[0046]*+html.select {color:#999 ;}/*IE7*/
[0047]針對(duì)Opera瀏覽器。
[0048]Omedia all and (min-width:0px) {.select {color:red ；}}
[0049]/*針對(duì)Chrome谷歌瀏覽器內(nèi)核支持的CSS樣式*/
[0050]Omedia screen and(-webkit-min-device-pixel-rat1:0) {
[0051].select {color:blue ；}}
[0052]針對(duì)Firefox瀏覽器的內(nèi)核CSS寫法:
[0053]1-moz-document url-prefix O {.select {color:green ;}}
[0054]1-moz-document url-prefix () {.select {color:green ；}}
[0055]第5步、在瀏覽器上打開(kāi)頁(yè)面，查看瀏覽器顯示的效果。
【主權(quán)項(xiàng)】
1.一種CSS多瀏覽器兼容的方法，其特征在于:通過(guò)<div>標(biāo)簽與CSS樣式組合來(lái)實(shí)現(xiàn)CSS的多瀏覽器兼容。
2.根據(jù)權(quán)利要求1所述的多瀏覽器兼容的方法，其特征在于:所述的方法包括以下步驟: 第I步、先建立html頁(yè)面和外部樣式表文件(.css)； 第2步、在html頁(yè)面鏈入外部css樣式表；〈head〉〈link rel = ^stylesheet^type = 〃text/css〃href = 〃style.css〃>〈/head〉 第3步、定義<div>標(biāo)簽同時(shí)設(shè)置class或id屬性； 第4步、根據(jù)不同瀏覽器需要，編寫對(duì)應(yīng)class的css樣式 第5步、在瀏覽器上打開(kāi)頁(yè)面，查看瀏覽器顯示的效果。
3.根據(jù)權(quán)利要求2所述的多瀏覽器兼容的方法，其特征在于:所述的根據(jù)不同瀏覽器需要，編寫對(duì)應(yīng)class的css樣式是:.select {color:#fcO ! important ；} ! important 可被 FireFox 和 IE7 識(shí)另Ij?select {*color:#fcO ;}* 可被 IE6、IE7 識(shí)別 ?select {—color:#360 可被 IE6 識(shí)別?select {*+color:#36c ;}*+ 可被 IE7 識(shí)別*html.select{color:#666 ;}/*IE6*/*+html.select{color:#999 ;}/*IE7*/ 針對(duì)Opera瀏覽器:?media all and(min-width:Opx) {.select {color:red ;}} Λ針對(duì)Ch1me谷歌瀏覽器內(nèi)核支持的CSS樣式*/?media screen and (-webkit-min-device-pixel-rat1:0) {.select {color: blue ;}} 針對(duì)Firefox瀏覽器的內(nèi)核CSS寫法:@-moz_document url-pref ix () {.select {color: green ;}}0
【專利摘要】本發(fā)明涉及Web前端開(kāi)發(fā)技術(shù)領(lǐng)域，特別涉及一種解決CSS多瀏覽器兼容的方法。本發(fā)明通過(guò)<div>標(biāo)簽與css樣式組合來(lái)實(shí)現(xiàn)CSS的多瀏覽器兼容。本發(fā)明有效解決了現(xiàn)有IE瀏覽器下浮動(dòng)產(chǎn)生的雙倍距離，F(xiàn)F和IE對(duì)盒模型的差異、高度不自適應(yīng)、影響頁(yè)面整體效果的問(wèn)題；可以用于CSS對(duì)各瀏覽器的兼容實(shí)現(xiàn)上。
【IPC分類】G06F17-30
【公開(kāi)號(hào)】CN104866570
【申請(qǐng)?zhí)枴緾N201510266661
【發(fā)明人】秦峰秀, 季統(tǒng)凱
【申請(qǐng)人】國(guó)云科技股份有限公司
【公開(kāi)日】2015年8月26日
【申請(qǐng)日】2015年5月22日