之前我有一篇文章,是關於線上即時翻譯部落格文章成英文的工具.原始文章請參照 – 部落格的線上即時翻譯 – Yahoo Babel Fish. 在這篇文章中我提到,Yahoo Babel Fish翻譯出來的英文可讀性比較高,但是卻會讓阿維雜記本的版面整個爛掉,最嚴重的部分就是阿維雜記本的屋頂整個飛走了,這個屋頂就是最上面那塊藍色底,寫著阿維雜記本的那一塊.

今天我想著這樣下去實在不是辦法,所以決定來個CSS大檢修,於是我就到 W3C CSS Validator的網站去檢查阿維雜記本的CSS.不檢查還好,一檢查居然發現有一堆錯誤,再仔細一看,媽的啊….這些錯誤大部分居然都是我以前在換成現在這個版面的時候,寫的一些測試段落 而我居然沒有把這些測試的段落拿掉或者是註解掉,而是用一些詭異的方式讓他們不會被讀到.看來我有時候真的是懶惰到一個過頭的境界.這個實在是太不專業了,以後一定要改掉這個壞習慣才行.

另外一個種類的錯誤,就是我以前在寫margin的時候,都習慣寫數字而已,而正確標準的寫法應該要加上單位.例如:maring: 5px 1px 5px 1px 這樣才是符合CSS level 2.1的寫法.

透過這次的CSS大檢修,我不但讓阿維雜記本的CSS更加正確,也讓自己寫程式常犯的毛病顯現出來,更讓我對於CSS的一些定義有了更明確的了解.看來也是相當有收穫.

修改之後,在FireFox下使用Yahoo Babel Fish版面可以正常的顯示,而IE依然有一些小小的詭異問題,不過屋頂飛走的悲慘畫面已經確定不會再出現了.