CSS/javascript 在 IE 與 Firefox 下的差別

鑑於寫網頁時，經常碰到 IE 與 Firefox 瀏覽器相容性的問題，即同樣的 CSS 或 javascript code，在兩個瀏覽器上看起來有所偏差，造成設計上的困擾，因此我從網路上整理了下面這些常見的 IE 與 Firefox 解析 CSS/javascript 上的不同之處以及解決方法。

1.
Firefox 不支援 innerText。Firefox 支援 innerHTML 但並不支援 innerText，不過可以使用 textContent 來達到 innerText 的效果。若不想用 textContent，如果內容字串不包含 HTML，可以 innerHTML 代替。

2.
關於禁止選取網頁內容。
在 IE 中，一般使用用 javascript：obj.onselectstart=function(){return false;}
而 Firefox 則必須用 CSS：-moz-user-select:none

3.
對 Firefox 而言，將 div 的 margin-left, margin-right 設為 auto 時，是自動置中的，但 IE 則不是。

4.
濾鏡的支援（如透明濾鏡）
IE：filter: alpha(opacity=10);
Firefox：-moz-opacity:.10;

5.
事件偵測。
IE：obj.setCapture() 、obj.releaseCapture()
Firefox：
document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

6.
div 等元素的邊界。
例如：指定一圖層的 CSS 為：{width:100px; height:100px; border:#000000 1px solid;} IE：div 的寬度（包括邊框寬度）=100px，div的高度（包括邊框寬度）=100px；Firefox：div的寬度（包括邊框寬度）=102px，div的高度（包括邊框寬度）=102px；但若加上 XHTML 標準後，兩個瀏覽器就都為 102px 了！

7.
ul 在 Firefox 和 IE 下的不同呈現。
ul 在 Firefox 下有 padding 值，卻沒有 margin 值；而在 IE 下正好相反，ul 有個 margin 值，卻沒有 padding 值。在 Firefox 下，ul 的 list-style 默認是處於內容的外邊緣的。但可以利用 CSS 可將 list-style 置為內容的內邊緣。
適合兩個瀏覽器的 ul 設定為：padding:0; margin:0; list-style:inside; 或者 padding:0; margin:0; list-style:none。
詳細圖文說明請見：wowbox blog (網頁設計知識庫)。

8.
IE 和 Firefox 對 CSS margin 與 padding 的解釋不一樣。最解單的方法是利用 CSS hacks，先 reset 各 selector 的 margin, padding。
* {margin:0; padding:0;}
關於 CSS hacks，原始來源，翻譯轉載，Yahoo YUI: Reset CSS。

9.
FireFox不支援捲軸變色。

10.
在元素上設定背景色時，IE 是作用在 padding + content ，而 Firefox 則是作用在 border + padding + content 上。

若要使網頁在 IE 與 Firefox 下都能夠順利呈現，有兩個常用的方法：

1.
判斷瀏覽器類型。
var isIE=document.all?true:false;
若支援 document.all，變數 isIE=true，否則 isIE=false

2.
在不同瀏覽器下的 CSS 處理。
通常用 !important 來自動優先使用 CSS 語法（僅 Firefox 支援）
如：{border-width:0px!important;border-width:1px;}
在 Firefox 下這個元素是沒有邊框的，在 IE 下邊框寬度是 1px

對經常利用 CSS 來美化排版網頁的使用者來說，有一個輔助編輯的工具是必須的，在 IE 上有 Internet Explorer Developer Toolbar，而 Firefox 上有 Web Developer 這些 Plugin，但如果能一次支援這兩種瀏覽器的呈現，那就更棒了！因此最後，推薦一個能夠同時支援 IE 與 Firefox 的 CSS 編輯軟體：CSSVista。它可以讓設計者同時、即時預覽這兩個瀏覽器下的結果，此外，也有自動 CSS 語法的提示喔！