王國(guó)慶

摘要：目前，在絕大多數(shù)高職院校中都有自己的網(wǎng)站，并由本校的教師來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與后期維護(hù)工作。在網(wǎng)頁(yè)設(shè)計(jì)與維護(hù)工作中，可能遇到各種問(wèn)題，網(wǎng)頁(yè)設(shè)計(jì)的最大挑戰(zhàn)不在于技術(shù)本身，而在于對(duì)瀏覽器兼容性的處理。作為一個(gè)合格的網(wǎng)站前臺(tái)開(kāi)發(fā)人員，在大多數(shù)情況下，要考慮用戶(hù)無(wú)論用什么瀏覽器查看我們的網(wǎng)站，都應(yīng)該有一個(gè)統(tǒng)一的顯示效果。所以瀏覽器的兼容性問(wèn)題是網(wǎng)站前臺(tái)開(kāi)發(fā)人員經(jīng)常碰到和必須要解決的問(wèn)題。

關(guān)鍵詞：瀏覽器兼容；解析；IE瀏覽器；CSS過(guò)濾器；IE條件語(yǔ)句

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）07-0057-02

Abstract： at present， have their own web sites in the vast majority of higher vocational colleges， and by the school teachers to design "and later maintenance work. In the web design and maintenance work， may encounter various problems， the biggest challenge of web design is not the technology itself， but lies in the treatment of the browser compatibility. As a qualified web developer， in most cases， to consider the user no matter what browser our website， should have a unified display effect. So the browser compatibility issues is the site of future developers often encounter and must solve the problem.

Key words： browser compatible analytical IE browser CSS filter IE conditional statements

1 引言

當(dāng)前打開(kāi)網(wǎng)頁(yè)有許多不同類(lèi)型或版本的瀏覽器，從W3C標(biāo)準(zhǔn)（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟）的角度來(lái)說(shuō)，瀏覽器可分為兩大類(lèi)：一類(lèi)為非標(biāo)準(zhǔn)型，如IE7及以下版本瀏覽器；另一類(lèi)為標(biāo)準(zhǔn)型，如IE8和非IE瀏覽器。我們?cè)跒g覽同一個(gè)頁(yè)面時(shí)，若采用不同的瀏覽器時(shí)，打開(kāi)網(wǎng)頁(yè)的效果有可能不相同，會(huì)產(chǎn)生不同的顯示效果。產(chǎn)生此種情況的原因就是瀏覽器不兼容的問(wèn)題。

所謂的瀏覽器兼容問(wèn)題，是指當(dāng)我們使用不同的瀏覽器對(duì)同一個(gè)頁(yè)面進(jìn)行訪問(wèn)時(shí)，造成頁(yè)面顯示效果不一致的情況。出現(xiàn)這種現(xiàn)象的原因很多，但根本原因就是瀏覽器對(duì)技術(shù)支持的標(biāo)準(zhǔn)不同所造成的。當(dāng)某個(gè)頁(yè)面不兼容時(shí)，多因?yàn)樗鼰o(wú)法兼容標(biāo)準(zhǔn)瀏覽器，僅支持及IE7以下版本類(lèi)型的瀏覽器。

IE瀏覽器對(duì)CSS的支持是很不標(biāo)準(zhǔn)的，對(duì)網(wǎng)頁(yè)布局存在很多問(wèn)題，主要表現(xiàn)在兩個(gè)方面：一是IE支持某種技術(shù)或功能，但實(shí)現(xiàn)該功能的方法和途徑與標(biāo)準(zhǔn)不同；二是IE瀏覽器自身的解析機(jī)制存在著許多Bug，導(dǎo)致頁(yè)面解析效果與標(biāo)準(zhǔn)不同。

2常見(jiàn)瀏覽器不兼容現(xiàn)象

在網(wǎng)頁(yè)設(shè)計(jì)中，碰到瀏覽器不兼容的現(xiàn)象很多，主要下面幾種：

（1）設(shè)置較小高度標(biāo)簽，在IE6、IE7等瀏覽器中顯示出高度不受控制，超出設(shè)置高度；（2）圖片默認(rèn)間距問(wèn)題，幾個(gè)img標(biāo)簽放在一起時(shí)，部分瀏覽器會(huì)有默認(rèn)的間距；（3）不同瀏覽器標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同，不加樣式控制的情況下，各自的margin和padding差異較大；（4）有序列表高度問(wèn)題，表現(xiàn)為列表序號(hào)顯示無(wú)效，主要存在于非標(biāo)準(zhǔn)的IE瀏覽器中，而標(biāo)準(zhǔn)瀏覽器不在于該問(wèn)題；（5）列表寬度問(wèn)題，主要存在于IE及以下版本的瀏覽器中，給列表框定義一個(gè)寬度時(shí)，在IE和非IE中的顯示顯示效果是不一樣的；（6）標(biāo)簽最低高度設(shè)置min-height不兼容，由于min-height本身是一個(gè)不兼容的CSS屬性一，所以設(shè)置它時(shí)不能被各瀏覽器兼容；（7）列表項(xiàng)錯(cuò)行問(wèn)題，當(dāng)為列表項(xiàng)嵌套塊狀元素，如div、p等元素且設(shè)置項(xiàng)目符號(hào)在內(nèi)部顯示時(shí)，非IE和IE瀏覽器在解析時(shí)會(huì)出現(xiàn)錯(cuò)行問(wèn)題。

3解決方案

由于不同類(lèi)型的瀏覽器對(duì)CSS技術(shù)的支持不完全統(tǒng)一的，再加上瀏覽器對(duì)CSS解析時(shí)存在的各種Bug，使得CSS兼容處理變得相當(dāng)復(fù)雜，應(yīng)該根據(jù)具體問(wèn)題采用相應(yīng)的解決方法。本文介紹兩種解決瀏覽器兼容問(wèn)題的通用方案：CSS過(guò)濾器和使用IE條件語(yǔ)句過(guò)濾。

說(shuō)明：“*”在IE瀏覽器中認(rèn)為是要節(jié)點(diǎn)，可以包含html元素，但對(duì)于非IE瀏覽器來(lái)說(shuō)，文檔根節(jié)點(diǎn)是html，而不是“*”。當(dāng)使用“*”通用符包含html元素時(shí)，非IE瀏覽器認(rèn)為它是非法，從而忽略選擇器所定義的樣式，同時(shí)IE6及以下版本瀏覽器不支持相鄰選擇器（+），所以也會(huì)忽略選擇器定義的樣式。selector表示任意類(lèi)型的選擇器，“/* */”為空白注釋?zhuān)琁E瀏覽器會(huì)直接忽略該樣式的存在。省略號(hào)語(yǔ)句代表著用戶(hù)自定義的html元素或選擇器定義樣式。

CSS過(guò)濾器的類(lèi)型和形式還有許多，以上4種專(zhuān)用過(guò)濾器，基本上可以解決瀏覽器兼容問(wèn)題。

方案二、IE條件語(yǔ)句過(guò)濾：

IE條件語(yǔ)句是IE瀏覽器自定義的一套邏輯語(yǔ)句，利用這些語(yǔ)句可以更加有效地為IE系統(tǒng)版本的瀏覽器定義樣式。因?yàn)楫吘刮覀兇蠖鄶?shù)用戶(hù)使用的瀏覽器基本上是IE系列的瀏覽器。IE條件語(yǔ)句實(shí)際上就是HTML注釋語(yǔ)句，只不過(guò)是在注釋標(biāo)識(shí)符中增加了一組關(guān)鍵字，這組關(guān)鍵字對(duì)IE瀏覽器是有效的，但對(duì)于非IE瀏覽器來(lái)說(shuō)被當(dāng)成注釋信息被注釋掉。由于IE瀏覽器能夠根據(jù)條件語(yǔ)句中設(shè)置的條件來(lái)決定解析的版本，從而實(shí)現(xiàn)了利用條件選擇不同的IE版本瀏覽器中定義樣式的目的。

說(shuō)明：省略號(hào)語(yǔ)句表示用戶(hù)自定義的瀏覽器定義樣式。IE條件語(yǔ)句以“[ ]”為起止標(biāo)識(shí)符，包含一個(gè)條件語(yǔ)句。條件語(yǔ)句放在注釋標(biāo)識(shí)符內(nèi)，與注釋標(biāo)識(shí)符內(nèi)部相鄰。在條件注釋語(yǔ)句中可以增加修飾性關(guān)鍵字。各關(guān)鍵字作用如下：

①lte關(guān)鍵字：小于或等于某個(gè)版本的IE瀏覽器；

②lt關(guān)鍵字：小于某個(gè)版本的IE瀏覽器；

③gte關(guān)鍵字：大于或等于某個(gè)版本的IE瀏覽器；

④gt關(guān)鍵字：大于某個(gè)版本的IE瀏覽器；

⑤！ 關(guān)鍵字：非IE瀏覽器。

4結(jié)束語(yǔ)

本文介紹的CSS過(guò)濾器與IE條件語(yǔ)句過(guò)濾法，其實(shí)都稱(chēng)為Hack（補(bǔ)?。┓?，就是利用各種過(guò)濾方法專(zhuān)門(mén)為特定類(lèi)型瀏覽器定義樣式，也稱(chēng)為過(guò)濾器，從而實(shí)現(xiàn)在不同類(lèi)型瀏覽器中顯出一樣的顯示效果。總之，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，先要為符合標(biāo)準(zhǔn)的瀏覽器設(shè)計(jì)樣式，然后專(zhuān)門(mén)為IE系列版本的瀏覽器設(shè)計(jì)兼容樣式表，分別存放在獨(dú)立的文件中，最后利用IE條件語(yǔ)句導(dǎo)入它們，可以極大在優(yōu)化CSS開(kāi)發(fā)，使網(wǎng)頁(yè)后期維護(hù)變得輕松。

參考文獻(xiàn)：

[1] 胡艷潔.HTML標(biāo)準(zhǔn)教程[M].北京：中國(guó)青年出版社，2004.

[2] 鄧文淵.DreamWeaver CSS網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2012.

[3] 張潔，任偉，吳林華.ASP典型模塊設(shè)計(jì)[M].北京：清華大學(xué)出版社，2007.

[4] 朱印宏.新編網(wǎng)頁(yè)制作與網(wǎng)站開(kāi)發(fā)從入門(mén)到精通[M].北京：北京希望電子出版社，2010.