（全文譯自：Firefox 10 のサイト互換性情報 – Mozilla Japan）

Firefox 10 正在進行開發，預計在 1 月 31 日釋出。儘管在開發時已盡最大可能維持相容性，但為了與其他瀏覽器的互用、以及符合最新 Web 標準，在 10 版中做了許多有關向下相容的修正。以下整理出這些修正點，在網頁測試時可做參考。

本文僅介紹向下相容所影響的修正。其他新功能和變更請參考以下網頁：

• 針對使用者的新功能：Firefox 10 の主な新機能を紹介します（日文）
• 針對開發者的新功能和變更點：Firefox 10 for developers （英文）

UserAgent 字串的版本號改為兩位數

Firefox 10 是第一個版本號為兩位數的正式版本。若用 UserAgent 字串來判斷瀏覽器而該程式碼的版本判斷不正確，有可能導致瀏覽器判斷錯誤。因此請確認使用 UserAgent 字串判斷瀏覽器的程式碼，或是先在 Firefox 10 Beta 版中測試。

Firefox 的 UserAgent 字串在正式版或測試版中如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0
Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1

正式版除了版本號為兩位數之外，之後若有安全性更新等版本，版本號會從原本由一個小數點區隔的「10.0」，變為有兩個小數點的「10.0.1」。請務必注意。

Firefox 的 Beta 版和正式版有一樣的 UA 字串，但 Nightly 版和 Aurora 版不同，如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a1) Gecko/20120122 Firefox/12.0a1
Mozilla/5.0 (Windows NT 6.2; rv:12.0a2) Gecko/20120122 Firefox/12.0a2

要注意的是 Gecko/yyyymmdd 的部分並非固定是 20100101、版本號尾端的也會加上 a1 或 a2 。有關 Firefox 的 UserAgent 字串的更多詳細資訊請參考 MDN 文件。

此外，Internet Explorer 的版本號也即將邁入兩位數。因此建議一並做好相對應的解決方案。

<table> 元素的邊界（margin）會正確抵銷

在 CSS 樣式內，前後元素的垂直方向邊界會發生「摺疊（margin collapse）」。也就是說，在兩個元素的垂直方向間的邊界會互相抵銷，只會顯示兩個元素中較大的邊界。

但在 Firefox 9 以前，在 ‘<table>’ 元素前後的元素邊界並不會抵銷，而是和 ‘<table>’ 本身的邊界相加。在 Firefox 10 已經修正為和其他元素一樣正確顯示。若 ‘<table>’ 和前後元素都設定了邊界，邊界會比舊版來得小。在倚賴縱向大小的版面配置上特別要注意 ‘<table>’ 的邊界設定。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 的上下邊界為 1+2=3em、2+3=5em，但在 Firefox 10 之後會變成 Max(1,2) = 2em、Max(2,3) = 3em。

<p style="margin: 1em;">具有 margin-bottom 的元素</p>
<table style="margin: 2em;"><tr><td>table 元素</td></tr></table>
<p style="margin: 3em;">具有 margin-top 的元素</p>

在非靜態位置的 <table> 內的絕對位置基準位置修正

在 CSS 樣式內，指定為絕對位置(position: absolute) 的元素，會以母元素中最靠近的非靜態 (position: static) 的元素(position: relative or absolute or fixed)為基準來設定位置 (top, bottom, left, right) 。

但在 Firefox 9 以前，就算母元素之中的 ‘<table>’ 元素不是靜態位置，子元素的位置會以更上層的非靜態元素為準。在絕對位置、相對位置或是固定位置的 ‘<table>’ 元素內指定絕對位置元素的情況，在新版會改變原先的版面配置。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 內的 ‘<div>’ 元素為以更上層的 ‘<div>’ 元素為基準，因此會出現在上方 0+50 = 50px、左 100+50 = 150px 的位置。在 Firefox 10 之後會改以 ‘<table>’ 元素為基準，出現在上方 100+50 = 150px，左方 100+50 = 150px 的位置。

<div style="position: absolute; left: 100px;">絕對位置的母元素
<table style="position: absolute; top: 100px;"><tr><td>
  table 內的靜態位置元素
  <div style="position: absolute; top: 50px; left: 50px;">table 內的絕對位置元素</div>
</td></tr></table>
</div>

以上兩項絕對誤置和邊界抵銷的問題都是針對 CSS 樣式的修正。其他瀏覽器也會做出相同的修正，因此以後不必為 Firefox 特別設計版面，只要讓版面相容於各大瀏覽器即可。詳細資訊請參考這篇文章。

此外，這裡為了簡化所以寫成 ‘<table>’ 元素，事實上只要是設定為 ‘display:table’ 的元素都有修正。

Strict 模式的 E4X 不再適用

Firefox 的 JavaScript 引擎過去支援簡單處理 XML 的語法，稱為「E4X」。但在導入 ECMAScript 5th 的 Strict 模式下，將不能再使用 E4X 語法。

若同時使用 E4X 和 Strict 模式，請放棄 Strict 模式，或是重新改寫原先 E4X 的原始碼。

刪除 DOM4 下不建議的屬性

在 DOM4 中不再建議使用以下的屬性，因此從 Firefox 10 之後刪除。

• document.xmlVersion 屬性
• document.xmlStandalone 屬性
• document.xmlEncoding 屬性
• text.isElementContentWhiteSpace 屬性
• text.replaceWholeText() 方法
• node.isSameNode() 方法

由於 document.xmlVersion 總是回傳 "1.0″ ，因此以往只能用來判斷 document 是 XML 或 HTML。現在其判斷方法如下：

if (document.createElement("foo").tagName == "FOO") {
  /* 在HTML 模式下 tagName 屬性會轉為大寫 */
}

若使用 node.isSameNode() 方法，請改用同值運算符號 (===) 來比較。

setAttribute() 設定為整數時，尾端的非數字會被省略

在 HTML 定義下，設定屬性為整數時，所設定的字串尾端的非數字會被省略。即 "100fox" 會被當作 "100″。

Firefox 9 以前若屬性值不是數字，會被當成錯誤。但在 Firefox 10 之後修正為讀取字串的數字部分。

例如以下的原始碼，在 Firefox 9 以前 ‘<canvas>’ 的寬度會回到預設值 (300) ，而在 Firefox 10 之後設定為 100 。

document.getElementById("canvasid").setAttribute("width", "100em");

ESC 鍵不再觸發 oninput 事件

在 HTML 定義下，只有元素的值改變時才會觸發 oninput 事件，但在 Firefox 4 到 Firefox 9 為止，使用者按下 ESC 鍵時也會觸發 oninput 事件。

Firefox 10 之後將遵照標準，ESC 鍵不會再觸發事件。

IndexedDB 的實作配合最新標準

Firefox 4 起開始支援當初起草的 IndexedDB 其中一部份 API，但之後支援的 API 經過多次的新增和標準修改。Firefox 10 起 IndexedDB 進行了較多的變更，其中要注意的是版本的指定方式。

以往連接到資料庫之後是用 setVersion() 方法指定版本，但 setVersion() 已經被刪除，改為在連結資料庫時用參數的方式來指定版本。

有關此項 IndexedDB 的更改，可參考由 mzsm 在上個月所撰寫的日文文章「IndexedDBに関する覚書 (2011年12月版)」。

AKB48 17th 單曲總選舉開始了～，這裡介紹如何使用電腦就可以投票的方法。 是說在這裡寫 IDOL 文章還真跳 TONE… 算了w

要做的事情很簡單，就是把電腦偽裝成手機，進入網站去投票這樣。

首先需要的是 Firefox 瀏覽器，可以到 Firefox 網站（http://moztw.org/firefox/）下載。

再來要下載 User Agent Switcher 這個擴充套件。下載網址：https://addons.mozilla.org/zh-TW/firefox/addon/59/。

（雖然這裡是用 Firefox，不過像 Google Chrome 等瀏覽器都有類似 User-Agent 的外掛可以用，照理說也是可以如法泡製，不過我沒測試過就是了ｗ）

接下來是最重要的關鍵，要把瀏覽器偽裝成手機。安裝好擴充套件之後，點選 Firefox 的「工具」→「Default User Agent」→「iPhone 3.0」。

搞定！開始投票吧！

AKB48 總選舉網站：http://www.akb48-sousenkyo.jp/。點進去就會看到這個畫面↓ 紅框框點進去吧

基本上投票就是滑鼠點一點就好…

上面輸入 CD 裡頭投票券上的數字編號，然後下面打上圖形認證碼

開始選人吧

確定好了就按「投票」，這邊按下去之後，就不能改了 （請不要問我為什麼上面是 Team A，這邊投給板野…）

最後要回答一些問卷問題，依序是年紀、性別、居住地（沒有海外的選項，就…隨便吧）、會參加的握手會場次（基本上也是沒差）

投完了，就這樣～。

安裝

安裝腳本：http://userscripts.org/scripts/show/103350（點選右上方綠色的［Install］安裝。）

現在的功能

• 在相簿模式瀏覽部落格相片。
• 放大、翻轉、上傳、在新視窗開啟相片。
• 快速拉至留言框。
• 分享部落格頁面到 Twitter、Google+ 等社群網站。
• 自動檢查新文章通知。只要開著部落格網頁（任何一頁都可以，不一定要是首頁），每5分鐘會自動check一次新文章。
• 上一遍、下一篇頁面切換。

功能列

關於

燈箱相簿模式

社群網站分享

新文章更新提示

更新紀錄

2011/8/24

• 1.5 版更新。
• 修正 Google Chrome 的 Bug。
• 增加頁面導覽功能。
• 增加部落格更新通知。

2011/8/22

• 1.4 版更新。
• 重建程式碼。
• 增加相片翻轉功能。

2011/7/28

• 1.3 版更新。
• 支援 yaplog!。

2011/7/9

• 1.2 版更新。

2011/6/15

• 新增上傳圖片至 imgur.com 功能。

2011/5/23

• 上傳至 userscripts.org。
• 使用 GNU GPL v3 license。
• 在每張圖片下顯示原始圖片網址。
• 在原始圖片上點兩下可以在新視窗開啟。
• 移除複製文章內文的功能。

2011/5/9

• 支援スタ☆ブロ的原始大圖顯示。
• 修正第二次按下文章內顯示圖片連結時的錯誤。

2011/3/8

• 新增取得標題橫幅圖片的功能。
• 新增一鍵跳到留言框（Ameba 和スタ☆ブロ）。
• 新增 Facebook 的說讚按鈕。

2010/6/4

• 新增支援 GREE 和 ORICON 的スタ☆ブロ。

2010/4/24

• 自動瀏覽改成 Ajax，不會卡住了。
• 加了一些陰影效果
• Javascript Compressed.

2010/4/15

• 新增上一頁、下一頁。
• 新增 顯示文章內所有大圖。
• 新增 直接推文到 Facebook、Twitter、Plurk。
• 修正 同一頁有多篇文章的時候可以一起複製內文。

有新功能的建議或錯誤回報歡迎留言告知。

進入正題。

玩過網頁設計的都知道，IE6 是多麼令人痛恨的一個軟體。

前幾天看到 YouTube、Facebook、Twitter 等知名網站，以後都將停止再支援 IE6，看得出大網站都想極力淘汰掉 IE6。

簡單來說 IE6 根本就是設計不良的一套軟體，使用者用起來累 更是殘害網頁開發者，自己獨樹一格的網頁顯示引擎，導致網頁設計常常無所適從。

有些人可能會說，「我用 IE6 都很正常啊 幹嘛要升級」，要知道 現在能用 IE6 瀏覽各個網站， 是多少網頁設計人的血淚換來的啊XD

另外 IE6 的安全性也是一大問題，為了自己、也為了網頁設計師。如果堅持 IE 王道的人，趕快把電腦裡的 IE6 升級到 IE7 以上吧（個人是比較推薦 IE8 啦…）。當然如果你平常就是用 Firefox 或 Chrome 等等的就沒差啦XD

至於有些用謎版 XP 可能不能升級的人，就投入其他瀏覽器陣營吧XD。我個人是 Firefox 跟 Chrome 兩邊用。

當然還有比較大的問題是網路銀行等等的 ActiveX 只能在 IE 下使用的窘境，這可能得靠使用者漸漸改變習慣，迫使網路銀行的程式設計能改善了。

總之，讓 IE6 就這樣走入歷史吧。