伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@daozen 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響瀏覽器版本
這個Bug影響：IE8、IE7、IE6
表現
自定義游標在IE中不顯示
教程日期
2009.07.17 17:26:30
描述
這是一個很少見的bug，不僅大多數人都會避免使用自定義游標（給cursor property 設定url(foo.cur))，而且要遇到產生這個bug的條件也很少見。
示例
由於這個bug的性質，示例在一個獨立的頁面
HTML Code:
|
1 2 3 4 5 6 7 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <link rel="stylesheet" href="../b/sheet.css" type="text/css" media="screen,tv,projection"> <div>TEST</div> |
CSS Code:
|
1 2 3 4 5 6 7 |
div{ height: 500px; width: 500px; margin: 20px auto; cursor: url(cursor.cur), crosshair; background: #f00; } |
在上面的程式碼中，我們的頁面文件連結了一個不同目錄下的樣式表。在那個樣式表裡面我們設定cursor property為一個自定義游標，該游標的url()為相對於CSS檔案的相對地址。但是，在IE裡面那個游標不出現了。發生了什麼了？發生這種情況的原因是IE解析游標的地址時相對於現在的文件（我們的HTML文件）故得到了一個404。
解決方案
以下是以型別安排的解決上述bug的方法。
解決方案（簡潔方案）
解決日期
2009.07.17.17:40:26
解決瀏覽器版本
所有受影響的版本
描述
既然我們現在搞清楚IE裡面的游標為什麼不顯示，解決方法就很明顯了——游標的路徑使用“絕對”路徑。（例如從web根目錄開始）
由於這個bug的性質，修復後的示例在一個獨立的頁面。
HTML Code:
|
1 2 3 4 5 6 7 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <link rel="stylesheet" href="../b/sheet_fixed.css" type="text/css" media="screen,tv,projection"> <div>TEST</div> |
CSS Code:
|
1 2 3 4 5 6 7 |
div{ height: 500px; width: 500px; margin: 20px auto; cursor: url(/demos/cursor/b/cursor.cur), crosshair; background: #f00; } |
現在把cursor property 裡面的url()設定為一個絕對路徑，在所有瀏覽器下都可以正常工作了。注：如果你不能用這種方法改變路徑的話，簡單使用條件註釋來給IE下給自定義游標設定一個不同的url()，就是將它設定為相對於HTML文件的相對路徑。