PO 一下我在 IE 上遇過的差異好了....
反正剛又爆了一科~心情有點差 = =
打個文章發洩一下
以下的 IE 是以 IE 7 為例
然後，這只是我在學習和開發一個網頁專案的途中遇到的
真正的差異可能更多
有錯請指正，有點久沒碰網頁了
=== HTML ===
1. fieldset tag 中的 legend tag
這個用貼圖說明比較快
Firefox
IE
不要問我那個對，我只知道 Firefox 那樣好看多了 囧
=== CSS ===
1. input 標籤
代碼:
input[type="text"]:focus,
input[type="password"]:focus {
background: Yellow;
}
在 IE 上是沒有效果的，點上去也不會變色
2. "* html ...." 寫法
這個只要稍微有碰過 IE 的應該都知道
著名的 IE hacks 寫法
只有 IE 讀得到
類似的還有 JavaScript 的 document.all 寫法
3. 邊界算法的差異
不詳述....會累死
不過似乎許多瀏覽器之間都有所差異
4. 表格的 display 值
IE 支援的值沒有 W3C 規定的那麼多
打個比方來說，如果把一個 tr 用 CSS 顯示為 table-cell
IE 就會馬上啟動無視技能 Lv. MAX
5. 表格的 border-spacing 值
IE 不支援這個讓我超點點點的 = =
變成必須在 "每個" table tag 中加上 cellspacing 值
不然一般只要 CSS 裡面加上 border-spacing 就每個表格都通用了
而且如果值變動了，要改還不用一個頁面一個頁面改
改一個 CSS 中的一欄就行了
6. iframe 的滾軸
設定成 overflow: hidden; 時
一樣是遭 IE 用無視技能反擊 囧
=== JavaScript === 這個就多了= =++
1. document.all 寫法
剛提過了，不再提
一般來說你也可以用這個來測 client 端是否是 IE
例如
var BROWSER_IS_IE=document.all?true:false;
2. attachEvent 函式
ECMA 的標準是 addEventListener
不僅名字不同，連傳入參數的方式和數量都不同 = =
3. returnValue
ECMA 的標準是 preventDefault 函式
到了 IE 不只名字不同，而且由函式改成一個變數
4. cancelBubble
情況跟上一個一樣
ECMA 是叫做 stopPropagation 函式
然後到了 IE 又改成了一個變數
5. 設定透明 (Alpha 通道)
這個基本上應該算在 CSS 裡啦....
代碼:
function setOpacity(target,opacityValue){
if(BROWSER_IS_IE){
target.style.filter='alpha(opacity='+opacityValue+')'; //IE
}else{
target.style.opacity=opacityValue/100;
}
}
6. 刪除一個 cookie 的值
代碼:
if(BROWSER_IS_IE){
document.cookie=name+'=;expires='+new Date().toGMTString();
}else{
document.cookie=name+'=;max-age=0';
}
什麼意思? 就是說在 IE 上要讓該 cookie 失效
還得去算出當下時間
而一般只要設個 max-age=0 就好
7. 創建 XMLHttpRequest 物件
這個應該有接觸 AJAX 的都知道，就不細講
不過後來聽說好像也支援了 window.XMLHttpRequest ? @@
8. 用 JavaScript 創一個新 table 於頁面中
用 Firefox 的話，創完後塞 tr 跟 td 進去該 table
就能在頁面上看到了
但是在 IE 裡，你還得在 table 下多裝一個 tbody
然後才能去塞 tr 跟 td
不然一樣無視 囧
9. DOM tree
在 Firefox 裡，tag 與 tag 之間如果有空白或是換行
會被當作 text node
不過在 IE 裡你看不到這種情況....
如果沒記錯，Firefox 那樣才算遵守 DOM 標準
10. onmouseout 事件
在該事件中，如果要指定滑鼠移出去時，所到達的元素
ECMA 規定是叫 relatedTarget
....IE? 叫 toElement
11. 還有太多了不想打....肚子餓了 Orz
登入
註冊
問答集
搜尋
