在下一張可以看到，瀏覽器對於屬性項、屬性和樣式有不同的處理方式，儘管現在跨瀏覽器的議題已不再是主要探討的議題，我們還是可以從程式開發的角度學到許多東西。

這章想學到什麼？

• 有疑問實作以規格書為主進行調整，勿以撰寫條件式修補
• 學習封裝程式，避免程式相互影響
• 避免製造陷阱讓自己栽進去，例如修改函式原型、物件屬性、以及DOM元素方法
• 避免貪婪的使用 id，在 form 裡 input 加上 id 屬性的錯誤
• 學習物件偵測
• 跨瀏覽器問題解決的替代方案
• 無法測試的瀏覽器問題

程式碼閱讀練習與撰寫

避免貪婪的使用 id

<form id="form" action="/conceal">
    <input type="text" id="action"/>
    <input type="submit" id="submit"/>
</form>

var what = document.getElementById('form').action;
console.log(what) // input#action

學習物件偵測

function bindEvent(element, type, handle) {
    if(element.addEvenListener) {
        element.addEventListener(type, handle, false);
    }
    else if(element.attachEvent) {
        element.attachEvent("on" + type, handle);
    }
}

or

if (typeof document !== "undefined" && (document.addEventListner || document.attachEvent) && docuement.getElementsByTagName && document.getElementById) {
    // 擁有足夠的 API 來打造應用程式
} else {

}

跨瀏覽器問題解決的替代方案

• 可以再進行其他的物件偵測，看看是否仍夠以一些 JavaScript 程式碼，提供縮減版本的操作功能
• 選擇不要執行任何 JavaScript 程式，退到沒有腳本程式的ＨＴＭＬ頁面
• 把使用者重導向到功能更少的簡單網站，例如 google 的 gmail 正是如此

無法測試的瀏覽器問題

• 事件處理綁定
• 事件觸發
• CSS 屬性效果，不會改變外在的屬性，例如 color，backgroundColor 等
• 瀏覽器當掉
• 新舊版不一致的API
• API效能表現
• Ajax相關議題