三月30

網頁設計有bug,現在是西元108年?


網頁設計有很重要的一環是要針對每一種瀏覽器做測試,不然可能會損失掉許多訪客、客戶。很不巧的,台塑石化上的日期時間顯示,卻犯了與瀏覽器相容性上的小錯誤,在IE看是顯示西元2008年,不過在Firefox上看,卻是西元108年?

請使用IE瀏覽此頁面:http://www.fpcc.com.tw/

看到圖中紅色框框部分,他很正常的,是顯示西元2008年。

西元108年?
(圖片看不清楚,請點圖放大)

不過反觀一下利用Firefox瀏覽,他卻顯示西元108年?

網站名稱:台塑石化股份有限公司
網站網址http://www.fpcc.com.tw/

我真的蠻好奇他怎會計算出這樣的數字呢?一般來說,網頁設計須要兼顧的瀏覽器有幾個比較主流的,像是IE6、IE7、Firefox2、Oper9…等等。或許有人會問,為什麼IE還要分成IE6與IE7呢?那是因為現在大多數的使用者都是使用Windows XP 為電腦工作平台,而Windows XP本身是搭配IE6,IE7是搭配在Winows Vista。如果Windows XP用戶想升級成IE7,必須自己到官方網站下載升級,但是會這麼勤勞的去升級的使用者真的不多,但是又礙於IE7將會成為未來微軟作業系統的內建主要瀏覽器(聽說IE8 beta已經出現了),因此IE7、IE6必須兩者兼顧。

而台塑網站的時間顯示,是使用Javascript,可能設計上有疏失,造成顯示異常。這算是個小錯誤,因為只是年份顯示錯誤,還不至於對網站、行銷造成多大影響。但是,我們進一步的思考,一個網站好比一間店,如我你店面的擺設出了問題,像是動線不佳、顏色搭配、擺設角度…等諸如此類,這就會影響到顧各對你的店面存在著不佳的觀感,或是一間店感覺上黑黑髒髒的,似乎不曾打掃過,那我想你的客戶應該通通流失掉。

再回到網站的角度,網站的設計是針對顧客,而顧客有各式各樣的需求,網站的設計,必須以顧客為主體,針對顧客、替顧客量身訂做,因此目前網路上的瀏覽器大多是IE,所以我們首要的網站設計是針對與IE相容性要夠,在這部分,台塑網站基本上是有做到的。不過千萬別忽略另一部份的人,網路上另一主流瀏覽器即是firefox,網站的設計當然也要針對firefox的使用者設計。這部分,台塑網站就略有疏忽,沒有注意到網站時間的顯示設置。

我們再來看一個先前的案例。我忘記我曾在哪裡看到這案例(時間是在好幾個月前),話說有家Pizza店的網路訂單系統出問題,就是他的下拉式選單中的各地區地址,除了在下拉是清單中會出現之外,連在網頁上方也會毫無保留的出現,這時在是令人十分傻眼。經過幾個月後的今天,我再次上去尋視一下,沒想到情況依然沒有改善!

網頁設計-瀏覽器相容問題-1

以上這張圖是使用IE7瀏覽,畫面十分正常,完全無異樣。

網頁設計-瀏覽器相容問題-2

現在,我們若改用Firefox2瀏覽時,畫面就如同上方一樣,住址全部不保留的顯示出來,這就是他們針對各版本的瀏覽器,沒有詳細加以測試一下,才會犯這麼嚴正的錯誤。犯了這樣的錯誤,系統是否能正常給予顧客使用、訂購呢?這部分我沒實際測試過,我無法回達。這錯誤,過了好幾個月,竟然都沒有人要出來維修一下。反觀另一家知名的Piaaz店,在網路訂購服務中,卻沒有此問題。

網頁設計並不是什麼難事,還記得在小學時,老師就開始教大家如何使用frontpage。因此,我們就可以清楚了解,網頁設計是連小學生都辦得到了,更何況是我們呢?網頁設計真正重要的是在它後續的維護bug的修正,這才是真正的困難、真正要學的技巧。


已經賣出了 11 條香腸!

  1. 1樓 TamCalvin
    2008-03-31 @ 23:33:46

    108年那問題早就知道, 只是不知道如何fix…

  2. 2樓 香腸
    2008-03-31 @ 23:35:18

    @ TamCalvin:
    早就知道了?你會上去台塑網站???

  3. 3樓 TamCalvin
    2008-03-31 @ 23:39:11

    @ 香腸:
    不是喔… 是在其他網站中發現(ucyber.net), 在ff下才有的問題….

  4. 4樓 香腸
    2008-03-31 @ 23:41:38

    @ TamCalvin:
    原來如此,可能都是用相同的Javascript吧^^

  5. 5樓 c
    2008-04-03 @ 18:46:56


    如果網頁有做不同瀏覽器的版本
    可以用<--[if IE]>
    的方式來區隔

  6. 6樓 香腸
    2008-04-03 @ 20:35:26

    @ c:
    可以這樣子喔?

  7. 7樓 c
    2008-04-04 @ 21:04:19

    是的
    這樣ie專用語法就可以被其他瀏覽器忽略
    但卻在ie正常顯示
    詳細使用方式請參考下面link
    http://blog.pixnet.net/boohover/post/12309095

  8. 8樓 Kent
    2008-04-20 @ 20:52:13

    我自己本身也有在設計網頁,這個問題一直都很麻煩。
    也許在 IE 下看起來很正常,到了 FireFox 總會有點走位。FireFox 好了之後,IE 又怪怪了。

    不過透過 CSS !important 優先級,樓上的方法,以及某網站(我忘了)釋出的 IE7 Standalone 就可以測試至少三種瀏覽器,並且讓 ie 和 firefox 都能有基本滿意的顯示效果。

  9. 9樓 香腸
    2008-04-20 @ 21:15:25

    @ Kent:
    有聽過「IE7 Standalone」這玩意,聽說還蠻不錯的樣子,不過我沒實際使用過,我想它比較適合專業網頁設計師,我這平民老百姓自己覺得OK就好了^^||

  10. 10樓 風痕影
    2008-05-01 @ 05:33:59

    其實並不需要這樣解決…
    只需把 getYear() 改成 getFullYear() 即可
    IE 也是支援 getFullYear() 的

    其實在 ECMAScript 的標準定義裡
    getYear() 就是 “西元年份 - 1900″
    所以 Firefox 顯示成 “108 年” 其實比較符合標準 XD

  11. 11樓 香腸
    2008-05-01 @ 09:12:26

    @ 風痕影:
    恩~很深奧的東西,IE和Firefox常常打架,在ie行,在ff卻不一定行,反之亦然。



歡迎留下您的意見與想法!

◆若有其他問題,歡迎提交聯絡表單詢問喔!



快來加入→掛BlogAD就可以讓你輕鬆賺摳摳
訂閱本站最新文章:  (如何訂閱?)