瀏覽器兼容問題的初步解決方法

鄭清 趙迪 孫淑霞

（成都理工大學計算機科學與技術學院，四川成都610059）

1.引言

網頁設計遇到最大的麻煩之一莫過于不同瀏覽器的兼容性問題了。所謂瀏覽器兼容問題，是指不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在一般情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的頁面或是登陸我們的系統，都應該是統一的效果。用什么方法可以有效解決瀏覽器兼容問題呢？可能很多人會認為可以使用CSSHack技巧，運用這種技巧后，在定義一個class時就會根據不同的瀏覽器，對同一種屬性做多次定義。通過這種做法能夠滿足不同瀏覽器的需求，但是在代碼上看起來就比較繁瑣。遇到用普通的CSS樣式解決不了的問題時，我比較喜歡用js函數來解決，這樣既可以不讓代碼看上起那么繁瑣，也可以鍛煉自己的編程能力。

2.瀏覽器兼容問題分析與實現

2.1 兼容問題的產生分析

在做頁面調試時，有的時候在IE中顯示正常，但是放在火狐瀏覽器中就不能換正常顯示。遇到這種問題我們大多數人的第一反應就是CSS樣式的問題，我們就會針對CSS樣式來做修改，很多時候這會耗費大量的時間，可能最后得到的效果并不是十分的滿意或是根本沒有解決問題。在工作中，曾遇到這樣一個問題，表格中顯示的文本是非漢字的文本，在火狐瀏覽器中文本換行就出現問題，當遇到一個單詞的長度超過所定義的列寬時，就會將整個表格撐開。下面就對這樣問題做一下詳細的表述。

頁面中使用的是JSF＜h：dataTable＞表格標簽，該標簽下的＜h：coloum＞標簽創建一列，可以使用多個＜h：coloum＞標簽。為了使表格顯示的效果比較好看，我們可以用CSS樣式來設置相應的屬性，一般會設置表格的寬度。因為頁面的本身寬度是有限的，在做頁面的時候希望所做的頁面在排版上比較規范，若遇到某一列的內容的寬度超出了所定義的列寬度，就需要換行了。列當中的內容是漢字還是數字或是字符，這一點也會影響到頁面的顯示。

對于漢字的換行來說比非漢字的換行在實現方面要簡單。此處以列內容為非漢字的表格做說明。在IE瀏覽器中，我們需要在＜h：dataTable＞標簽中加入一些屬性，style=”table-layout：fixed；”，然后在相應的列中，添加以下屬性word-break：break-all；word-wrap：break-word；將word-break屬性設為break-all是允許文本行的任意字內斷開，word-w rap屬性break-word文本內容將在邊界內換行，如果需要，詞內換行也會發生。設置好這些屬性后，發現這些屬性只會在當文本行內有空格，且當前的寬度已超出了這列的寬度時才會換行，如果當前文本行的寬度已超出所定義的寬度，但是沒有遇到空格符，這種情況下是不會換行的，這樣就會將表格撐寬。

2.2 初步解決辦法

在CSS樣式解決不了的情況下，就想到用js來實現，假設表格的第一列的寬度可能會超出所定義的寬度，js實現代碼如下：

用js代碼實現部分，就是做了一個截取字符串的操作，如果字符串的長度大于所限定的寬度（假設此處的最大長度為20），就按照一定的長度來截取字符串，并在每一段截取的字符串的后面加上一個空格，這樣就能夠保證自動換行。在做截取之前，先判斷所用瀏覽器的是否是IE瀏覽器，如果是的話就不需要做這些操作，IE瀏覽器對于這些屬性是支持的。

2.3 瀏覽器兼容問題最終解決辦法

在上述代碼中，有一個問題需要注意。rowsOfTable可能是null，也可能是undefined，在這種情況下，若在ready中，findStrLength()函數后還有要執行的函數或語句，那么在火狐瀏覽器中，在findStrLength()后的函數或語句是不會被執行的。因為我們在獲取表格內容的時候沒有去判斷是否存在內容，當遇到表格內容為空或是undefined的時候，執行該函數時就會有錯，系統會自動終止后函數的執行。即使該函數后一個簡單的輸出語句也不會被執行的。為了在火狐瀏覽器中能夠順利執行，需要加入一些判斷，在for循環語句的循環體中加入以下判斷語句（定義innerText變量之前）：

continue的作用是結束本次循環，也就是說循環體中在該語句后面的內容就不會被執行。加入上述代碼之后，在火狐下就可以順利運行。這樣當所獲得的表格內容為空時，就會跳出循環，轉去執行循環后面的語句。

以上是對于一個表格問題的解決方案。其實關于表格還有很多其它方面的問題，要使得整個頁面布局看起來比較舒服，就需要加上一些必要的CSS樣式。我們不能確保這些樣式在不同的瀏覽器之間是否都可以正常顯示，但是可以在出現問題時，尋求各種方式來解決。

3.結束語

現在所有的主流瀏覽器供應商重新表示支持W 3C(World WideWeb Consortium)標準，而且，這些廠商表示要將標準進行到底；正在制定中的W 3C標準比以前更嚴格，Web創作工具產生的代碼也會比以前規范?；蛟S會人認為有了這些標準和規范，瀏覽器兼容問題就不會那么令人頭痛了，答案是否定的。部分原因在于不同的瀏覽器提供商對同一標準有不同的認識和解釋，或者瀏覽器設計時原本就沒有嚴格地符合新標準；另外，標準和規范本身也有不完善的地方，有些規范或者含糊不清或者對某些功能根本就沒有加以明確；最后一個原因是，標準發布得太慢，以至于瀏覽器供應商在標準之外進行“創新”。所以說解決瀏覽器兼容問題并不是一朝一夕的，在瀏覽器顯示出現問題時，修改CSS樣式達不到我們所需的要求，那我們就得另辟蹊徑了。

[1] 趙莎莎，李敏.CSS樣式表與不同的瀏覽器[J].軟件導刊.2007(05)：67-68.

[2] 黎亞紅，羅藤.CSS在不同瀏覽器中的兼容性問題淺析[J].岳陽職業技術學院學報.2008(03)：84-86.

[3] 孫桂杰.使用CSS制作網頁的幾點經驗[J].中國現代教育裝備.2008(05)：55-57.

[4] 李顯萍.CSS樣式繼承性的應用[J].吉林省經濟管理干部學院學報.2009(04)：84-86.

[5] 鞏恩偉.CSS在瀏覽器中的兼容性及使用技巧[J].電腦知識與技術.2009(06)：1413-1414.