【分享】跨瀏覽器不是一件簡單的事

今天google的時候，就會看到這個畫面，大家應該也都對google doodles並不陌生，這個拉鍊很有趣，可以用滑鼠拉上拉下，也可以直接點選後，連結到搜尋結果，我們公司的RD跟我說，這個頁面是用HTML 5的語法做的。


這個時候我的職業病就犯了，除了用Mac的safari以外，也用Mac的Chrome測試一下，看起來畫面都跟safari一樣，跨瀏覽器是沒問題的。

不過看起來沒問題，用起來也一樣嗎？Mac的safari可以很順暢的把拉鍊上下拉，但是同樣是google開發的Chrome for Mac，居然拉拉鍊的時候，會lag，大概會有一兩秒的延遲，拉鍊頭才會跟著滑鼠拉下來，這就讓我有點訝異，居然同樣的網頁，連google自己開發的瀏覽器，都會有不同的顯示結果，記得之前曾經看過一則新聞，內容是google的RD，用的也是macbook pro來開發，我猜該不會只有用safari來測試這次的doodle吧XD

光是safiri跟Chrome以外，我能不用就不用，但是卻仍是最多人使用(至少在台灣還是吧)的IE，就更讓我好奇會有什麼結果了，在Windows部分，我還在用Windows XP，所以只能裝到IE 8，IE8是不支援HTML 5的，所以用我的XP+IE8來開啟google後，畫面就變成下面的樣子：

因為IE 8不支援HTML 5，所以只能用圖檔來顯示，只能在畫面中間放一張圖片，拉鍊沒辦法貫穿搜尋列，而且也沒辦法上下拉拉鏈，當然IE 8以下的版本，自然也都是同樣的方式，用同事的IE 9來看，就能跟safari一樣顯示了，至於會不會lag，因為是別人的電腦，所以我就沒有測試。

會這麼無聊的寫這麼多，其實是有感而發，最近我規劃的產品，最主要的訴求，就是可以跨四大主要瀏覽器使用，但是實際上，在implement的時候卻發現有很多小細節需要調整，更麻煩的是，就是明明是為了要給使用者有更好的操作體驗，所以用了一些 java script來開發，沒想到卻又為了部分IE6,7的使用者，要另外提供可以在IE6,7下可以使用的版本，又讓我深深覺得IE6,7真的是阻礙網頁技術的一大絆腳石啊。