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

鄭清 趙迪 孫淑霞

（成都理工大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，四川成都610059）

1.引言

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

2.瀏覽器兼容問題分析與實(shí)現(xiàn)

2.1 兼容問題的產(chǎn)生分析

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

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

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

2.2 初步解決辦法

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

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

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

在上述代碼中，有一個(gè)問題需要注意。rowsOfTable可能是null，也可能是undefined，在這種情況下，若在ready中，findStrLength()函數(shù)后還有要執(zhí)行的函數(shù)或語句，那么在火狐瀏覽器中，在findStrLength()后的函數(shù)或語句是不會(huì)被執(zhí)行的。因?yàn)槲覀冊(cè)讷@取表格內(nèi)容的時(shí)候沒有去判斷是否存在內(nèi)容，當(dāng)遇到表格內(nèi)容為空或是undefined的時(shí)候，執(zhí)行該函數(shù)時(shí)就會(huì)有錯(cuò)，系統(tǒng)會(huì)自動(dòng)終止后函數(shù)的執(zhí)行。即使該函數(shù)后一個(gè)簡(jiǎn)單的輸出語句也不會(huì)被執(zhí)行的。為了在火狐瀏覽器中能夠順利執(zhí)行，需要加入一些判斷，在for循環(huán)語句的循環(huán)體中加入以下判斷語句（定義innerText變量之前）：

continue的作用是結(jié)束本次循環(huán)，也就是說循環(huán)體中在該語句后面的內(nèi)容就不會(huì)被執(zhí)行。加入上述代碼之后，在火狐下就可以順利運(yùn)行。這樣當(dāng)所獲得的表格內(nèi)容為空時(shí)，就會(huì)跳出循環(huán)，轉(zhuǎn)去執(zhí)行循環(huán)后面的語句。

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

3.結(jié)束語

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

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

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

[3] 孫桂杰.使用CSS制作網(wǎng)頁(yè)的幾點(diǎn)經(jīng)驗(yàn)[J].中國(guó)現(xiàn)代教育裝備.2008(05)：55-57.

[4] 李顯萍.CSS樣式繼承性的應(yīng)用[J].吉林省經(jīng)濟(jì)管理干部學(xué)院學(xué)報(bào).2009(04)：84-86.

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