王國慶

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

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

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：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)前打開網(wǎng)頁有許多不同類型或版本的瀏覽器，從W3C標(biāo)準(zhǔn)（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）的角度來說，瀏覽器可分為兩大類：一類為非標(biāo)準(zhǔn)型，如IE7及以下版本瀏覽器；另一類為標(biāo)準(zhǔn)型，如IE8和非IE瀏覽器。我們在瀏覽同一個頁面時，若采用不同的瀏覽器時，打開網(wǎng)頁的效果有可能不相同，會產(chǎn)生不同的顯示效果。產(chǎn)生此種情況的原因就是瀏覽器不兼容的問題。

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

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

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

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

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

3解決方案

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

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

CSS過濾器的類型和形式還有許多，以上4種專用過濾器，基本上可以解決瀏覽器兼容問題。

方案二、IE條件語句過濾：

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

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

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

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

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

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

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

4結(jié)束語

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

參考文獻：

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

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

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

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