淺談有關網頁版面調整

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

###引言 - 為什麼要相容其他的瀏覽器？
從這邊開始，需要先來說一個故事….
很久很久以前，有一個組織叫做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的部分排出來的時候，其實事實上是像圖片上紅線的樣式切出空間然後將圖片、連結就上定位。但是就是因為有固定的寬度，也沒有辦法在為了維持目前的字體大小之下，將其他的瀏覽器加字後完整的不換行放在同一個空間中。
所以，千萬別以為只有加「二個字」也是很簡單的事…….設計師們可能要調上好久的時間囉！