其實很多時候當網站完成之後,其實有的時候難免都會調整一下畫面,雖然有的時候只是畫面上多加一、二個字之類的,但還是希望能夠維持和原先一樣的畫面。但是其實很多時候,沒有注意到這可能會影響到整個畫面的呈現。我們以下就來實例探討為什麼會發生這樣的事情....

引言 - 為什麼要相容其他的瀏覽器?

從這邊開始,需要先來說一個故事....
很久很久以前,有一個組織叫做W3C...他們將目前我們看的到的網頁呈現的html完整的將規格訂立出來,再由各家瀏覽器(Windows上的Internet Exploer就是IE、Firefox火狐、Opera、等等)把這些html語法轉換成畫面讓大家看到目前網頁看的到的樣子。如下圖:


(圖片中各瀏覽器logo版權屬各家瀏覽器公司..)

當各家瀏覽器開始將轉換畫面的部分開始實作的時候,有些總是會難免加入自己覺得不錯的功能...。而這個在早期發展瀏覽器的時候,基本上都幾乎是獨佔的情況下,看起來似乎是沒有這麼大的問題。但是就在Firefox、Chrom(google瀏覽器)開始出現的時候變的不太一樣了。很多的使用者開始轉向使用Firefox、Chrom來瀏覽網頁,接著,很多使用者開始發現了很多的畫面變的很可怕的問題出現了。「畫面變得和原來長的不一樣」這類的反應就出現了. 所以,其實在後來的設計師們在處理網頁的時候,就變成必需要盡量的去讓這幾個瀏覽器顯示出來的頁面長相一致。加上,其實早期最流行的IE6,IE6當初就是出現在瀏覽器幾乎是一家獨大的時代,雖然取代了當時最流行的Netscape Navigator瀏覽器,而後來成為了windows xp預設出廠的瀏覽器後,都是使用者長期的最愛。但這個問題就出現在其實IE6本身除了有實作W3C的規格之外,又自身加了不少東西。結果偏離了規格,也因為目前html的成長更新中,一直跟不上腳步。雖然後續微軟(Microsoft)有再將瀏覽器IE推出新版本如IE7以及IE8,都是為了回歸W3C的規格,但長期系統開發在一開始撰寫的時候因為依賴IE6的情況下,更新後卻沒辦法正常運作,導致了很多問題發生。最後,連微軟(Miscrosoft)自己都不得已跳出來請大家放棄使用IE6,還製作了一個IE6countdown的網站

有了前一段的說明,接下來就可以來解釋為什麼有的時候連加個字版面都會不一樣?基於前一段的故事,多少已經有人發現了一個殘酷的事實....就是.....「這樣設計師不就做一次,起碼要測上六個瀏覽器(IE6, 7, 8, Firefox, Chrom, safari,有的人測到七個,第七個是小有名氣的Opera歌劇院瀏覽器...)」是的。絕對沒有看錯。這真的是事實.....

解說

假設

有一個html的版面,長的樣子如下:

需求

需要將圖中logo右邊有一個歡迎訊息:「您好, 歡迎來到xxxxxxxx X網站.」的加入二個中文字,變成「您好,歡迎來到xxxxxxxx 這是一網站.」

問題

在畫面上看起來,其實感覺將需求一下就可以完成。而其實也只是二個字而已。但開始動的時候就發現問題來了.....在IE6上,可以正常的顯示。如下圖:

但是同樣的畫面在Firefox、Chrom、IE8會變成下圖的樣子:

這個時候,總是會發現,怎麼會有這種情況?這到底是發生什麼事?又不想把字體縮小,因為如果這個文字再縮下就到8px的話,其實如果是Mac的使用者看到會發現小到很難看的清楚。但是,不縮小又沒辦法整個不換行放進去.....

網頁實際切版狀況

我們來看看實際上header的部分排版的狀況:

如果以目前這個版面是以Table做排版的情況,並且將header的部分排出來的時候,其實事實上是像圖片上紅線的樣式切出空間然後將圖片、連結就上定位。但是就是因為有固定的寬度,也沒有辦法在為了維持目前的字體大小之下,將其他的瀏覽器加字後完整的不換行放在同一個空間中。
所以,千萬別以為只有加「二個字」也是很簡單的事.......設計師們可能要調上好久的時間囉!