前言：本站為你精心整理了網(wǎng)頁(yè)設(shè)計(jì)與瀏覽器兼容解決方法范文，希望能為你的創(chuàng)作提供參考價(jià)值，我們的客服老師可以幫助你提供個(gè)性化的參考范文，歡迎咨詢(xún)。

1瀏覽器與網(wǎng)頁(yè)兼容存在的問(wèn)題

眾所周知,上網(wǎng)的時(shí)候一般是通過(guò)瀏覽器來(lái)實(shí)現(xiàn)的,所謂的瀏覽器就是指能顯示網(wǎng)頁(yè)服務(wù)器或文件系統(tǒng)的HTML文件內(nèi)容,可以確保用戶(hù)與該類(lèi)文件進(jìn)行交互。不同的瀏覽器之間的內(nèi)核是不同的,這就導(dǎo)致同一網(wǎng)頁(yè)在不同的瀏覽器中的效果出現(xiàn)差異,甚至不能夠正常顯示。目前一些網(wǎng)站的設(shè)計(jì)還沒(méi)具備兼顧各種瀏覽器的能力,通過(guò)少數(shù)的瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)會(huì)出現(xiàn)變形、無(wú)法訪(fǎng)問(wèn)、顯示不全和圖片不動(dòng)等現(xiàn)象。對(duì)于這種問(wèn)題,網(wǎng)頁(yè)開(kāi)發(fā)人員把設(shè)計(jì)好的網(wǎng)站要放在不同的瀏覽器上檢測(cè)其兼容性,對(duì)出現(xiàn)不同的情況要通過(guò)有針對(duì)性的方法來(lái)解決。多數(shù)的網(wǎng)站設(shè)計(jì)人員采用CSS來(lái)展開(kāi)布局進(jìn)行設(shè)計(jì)的。目前,CSS3把CSS劃分為不同的模塊,功能也不斷強(qiáng)大,網(wǎng)頁(yè)設(shè)計(jì)也更加方便,不管是主流的門(mén)戶(hù)網(wǎng)站還是各種小公司甚至個(gè)人的小站,也都是通過(guò)CSS進(jìn)行展開(kāi)設(shè)計(jì)的。曾經(jīng),IE占據(jù)了瀏覽器的主流地位,但隨著互聯(lián)網(wǎng)科技的不斷發(fā)展,瀏覽器的各類(lèi)呈井噴趨勢(shì),如搜狗、360極速、百度都在推出自己的瀏覽器,而且還占領(lǐng)了一大塊市場(chǎng)份額,與此同時(shí),谷歌、火狐、3435等瀏覽器也在市場(chǎng)上占有重要地位。各種不同的瀏覽器所使用的內(nèi)核也是不同的,這導(dǎo)致很多網(wǎng)頁(yè)瀏覽器不兼容,因?yàn)槭菫g覽器的內(nèi)核負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法進(jìn)行解讀并渲染網(wǎng)頁(yè)。因此,瀏覽器的內(nèi)核不同,對(duì)網(wǎng)頁(yè)的語(yǔ)法解釋也是不同的,同一個(gè)網(wǎng)頁(yè)在不同的瀏覽器下的顯示也是不同的,這就是我們所說(shuō)的網(wǎng)站設(shè)計(jì)和瀏覽器的兼容性問(wèn)題。如果網(wǎng)頁(yè)和瀏覽器的兼容性問(wèn)題處理不好,可能會(huì)導(dǎo)致瀏覽器對(duì)網(wǎng)頁(yè)內(nèi)容解讀錯(cuò)誤,出現(xiàn)亂碼、變形、信息錯(cuò)亂等現(xiàn)象,影響頁(yè)面的美觀和使用。

2幾種網(wǎng)頁(yè)與瀏覽器兼容問(wèn)題的解決方法

2.1采用Hack技術(shù)實(shí)現(xiàn)瀏覽器的兼容性問(wèn)題

所謂Hack技術(shù)就是利用不同瀏覽器對(duì)CSS樣式支持不同的特點(diǎn),針對(duì)不同瀏覽器分別重復(fù)定義多個(gè)不同的樣式表,由瀏覽器各自解析執(zhí)行自己支持的樣式,從而設(shè)計(jì)出不同瀏覽器具有相同顯示效果的頁(yè)面。目前最常用的方法是利用瀏覽器對(duì)加入特殊字符的選擇符或個(gè)別樣式的支持、不支持重復(fù)定義不同的樣式。對(duì)個(gè)別瀏覽器有特別顯示效果的樣式,如果個(gè)別瀏覽器有自己?jiǎn)为?dú)支持的隱藏樣式,則先針對(duì)大多數(shù)瀏覽器定義通用樣式,之后再用個(gè)別瀏覽器單獨(dú)支持的隱藏樣式重復(fù)定義該樣式,使得大多數(shù)瀏覽器使用前者,個(gè)別瀏覽器用隱藏樣式覆蓋后單獨(dú)使用后者。如果個(gè)別瀏覽器不支持大多數(shù)瀏覽器使用的樣式,則先針對(duì)個(gè)別瀏覽器定義樣式,之后再用個(gè)別瀏覽器不支持的樣式為大多數(shù)瀏覽器重復(fù)定義該樣式,使個(gè)別瀏覽器使用前者,大多數(shù)瀏覽器覆蓋后使用后者。

2.2不同瀏覽器頁(yè)邊距不一致問(wèn)題

比如在CSS中寫(xiě)一個(gè)margin—left:588px,經(jīng)過(guò)測(cè)試人們了現(xiàn)在IE8和火狐瀏覽器的顯示效果民相同的,但I(xiàn)E6中顯示就會(huì)出問(wèn)題,主要表現(xiàn)就是頁(yè)邊距會(huì)相差幾個(gè)像素,這就影響了網(wǎng)頁(yè)的美觀。這種現(xiàn)象產(chǎn)生的原因是不同的內(nèi)核對(duì)網(wǎng)頁(yè)的解讀不同導(dǎo)致的,也就是渲染機(jī)制不同。不同的廠商對(duì)CSS的解釋是有一定的差異的,同一個(gè)廠商不同的版本對(duì)此也可能出現(xiàn)不同的解釋,正如上面講到的IE7和IE8對(duì)同一問(wèn)題的渲染是不同的。另外,瀏覽器和CSS和版本一直處于動(dòng)態(tài)更新之中,這也是導(dǎo)致二者經(jīng)常無(wú)法兼容的因素。對(duì)這一問(wèn)題的解決可以對(duì)不同的瀏覽器書(shū)寫(xiě)不同的標(biāo)準(zhǔn)。

3結(jié)語(yǔ)

本文只是簡(jiǎn)單介紹幾種解決網(wǎng)頁(yè)和瀏覽器的兼容方法,隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展,瀏覽器和網(wǎng)頁(yè)的不兼容問(wèn)題可能會(huì)更加突出。要想從根本上解決這個(gè)問(wèn)題,還要從瀏覽器的內(nèi)核著手。只有不同的廠商使用統(tǒng)一的CSS標(biāo)準(zhǔn),才能從根本上解決網(wǎng)頁(yè)和瀏覽器的兼容問(wèn)題。

作者：過(guò)玉清 單位：江蘇聯(lián)合職業(yè)技術(shù)學(xué)院徐州財(cái)經(jīng)分院