淺談瀏覽器兼容統(tǒng)一性問題與解決方案

王國慶

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

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

中圖分類號：TP311 文獻標識碼：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 引言

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

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

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

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

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

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

3解決方案

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

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

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

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

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

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

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

②lt關鍵字：小于某個版本的IE瀏覽器；

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

④gt關鍵字：大于某個版本的IE瀏覽器；

⑤！ 關鍵字：非IE瀏覽器。

4結束語

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

參考文獻：

[1] 胡艷潔.HTML標準教程[M].北京：中國青年出版社，2004.

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

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

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