Silverlight 5 / HTML5 / CSS3 / Visual Studio / Flash CC / Office2012 / Flash Player 11 / Windows 8
處理不同瀏覽器間的CSS3差異
尖端技術從來都不是沒有代價的。有時這意味著新興標準只能得到有限的瀏覽器支持,而當那些標準的草案改變的時候,也意味著你必須回去把你的代碼重寫 一次。當這些同樣的問題遇上仍在進行中的CSS 3規範的時候,就不僅是瀏覽器支持 非常少的問題了,而是大部分瀏覽器都有實現他們特定的前置。這些前置是非常複雜的事情,如果你需要把這些東西用在你的代碼裡的等方面,你通過需要更多的工 作,而且——他們通常都是有目的的。
打個比方,如果你想用到CSS3中的圓角新特性,你應該使用border-radius 義他們。但是因為這個特性仍然還沒有最終定稿,所以瀏覽器們只支持他們對應的自己實現的版本。所以-moz-border-radius 就對應於Mozilla Firefox, 而-webkit-border-radius 則相對應於Safari和Chrome了。對於Opera呢?也有自己的版本:-o-border-radius。
特有的前置都不會驗證,這不太理想。對於CSS驗證器來說,對浮動環繞的效果而使用了特定的前置的時候,則應該提出一個建議而不是一個錯誤。無論如 何,如果你想在你的CSS代碼中使用絕對的標準的話,你都應該遠離這些特定的前置。
不過,如果你想玩玩CSS3這個新玩具的話,你就會了解為什麼這些特定前置有很好的理由存在,而為什麼你在現階段也會使用到這些來體驗到目前的 CSS3規範的。
讓我們繼續停留在這個圓角效果的例子上,設想一下假如你只想應用到一個對象的一個角上會產生什麼情況。 CSS3規範還在繼續變化時,Webkit項目決定使用–webkit-border-top-right-radius時,Mozilla卻使用了 –moz-border-radius-topright。沒有這些前置的話,你將要處理兩條不同的CSS規則,而且其中一條是絕對會被永遠廢棄掉的,但是仍然有可能會有舊版本的瀏覽器會使用到。
從純粹的技術上來說,這兩個前置都是"錯誤的",這是好事。將來,最終的規範一定會發布,而只有一種規則會被標準化,那時候所有的瀏覽器都會實現這 一標準。在這一點上,你可以簡單地在你的代碼中將特定的前置刪除掉就行了。這些特定的前置好處就體現出來了,它使得這些代碼很容易被找到和刪除。
有一件你絕對就應該做的事情就是只針對一個瀏覽器的前置。蘋果的HTML5展示最近被大家關注,只支 持Safari,而不支持其它實現了HTML5的瀏覽器[雖然,你可以不 使用Safari 5查看蘋果的HTML5演示],而同時Google也 發布了HTML5展示站點:HTML5Rocks[HTML5在同為使用Webkit內核的Safari和Chrome上支持不同],這些都證 明了只為一種瀏覽器做優化不是一個好主意,甚至有人認為HTML5是應用程序 設計中的新冒險。
如果你必須要使用特定的前置這個非標準化的行為讓你感到不安的話,你還有一個辦法。那就是使用Javascript來自動完成它。
開發人員阿龍.古斯塔夫森寫了一篇"列表的關鍵文章",他在文章裡嘲笑了這些特定的前置並且提供了一段 Javascript的替代方案給和他感覺一樣的人們。
古斯塔夫森把這些特定的前置叫做CSS的分支。雖然我們基本上同意他的觀點,但是這個"分支"這個詞是有問題的,因為分支代碼沒有任何錯誤,事實上 這是開源世界中的規範(你在使用Git或者是Mercurial嗎?)。而且這些特定前置並不是分支,它們是在標準化還沒有完成的時候推動網絡進步的臨時 的解決辦法。
拋開那些術語之後,古斯塔夫森的觀點是有效的——忽略標準和使你的CSS代碼只工作在特定的瀏覽器中的做法兩個都是糟糕的主意。
古斯塔夫森的這個小小的Javascript庫可以幫助你避免將特定的前置寫進你的CSS中。但是令人印象深刻的是,這個腳本確實做到了與將前置寫 進CSS文件中的一樣的效果。這個方法有些缺點——會延長加載時間,而且對於那些禁用了Javascrpt腳本的用戶來說,也是無效的。
如果你現在就開始使用CSS3的特性,你將無法避免使用特定的前置,但是至少,你可以選擇如何處理他們。例如:直接在樣式表中使用這些前置、將這些 特定前置的樣式寫到單獨的分離的文件中或者是使用古斯塔夫森提供的這種類似的腳本來解決它。
供稿:SafariX — Safari中文博客,分享Safari資訊、技巧和擴展。
中文出處:http://safarix.net/dealing-with-browser-differences-in-css-3
英文出處:http://www.webmonkey.com/
相比Google和蘋果,微軟到底有多厲害?
昨天微軟負責溝通的主管Frank Shaw在微軟官方博客上發表了一組和微軟產品相關的數據。目的顯然是為了駁斥最近一些對微軟不利的負面報導。
你不得不佩服微軟,這些數字真厲害。
其實微軟不必這麼低調,而不是讓數字說話。你看人家蘋果喬布斯就敢於站出來對Flash指手劃腳。以下我們就解讀以下這些數字後面的潛台詞:
1.5億
Windows 7許可證銷量,這讓Windows 7成為有史以來增長最快的操作系統。
微軟潛台詞:我們的對手炒作得很厲害,人們都說微軟"大勢已去",但我們每秒賣出7套操作系統。記住這組數字, 下面會用到。
710萬
2010年iPad預計銷量
5800萬
2010年上網本預計銷量
3.55億
2010年PC預計銷量
微軟潛台詞:還記得1.5億這個數字嗎? iPad遜色了吧。 iPad和上網本會吃掉PC?我有3.55億個理由告訴你這樣的事情短期內不會發生。還有我們已經售出了1.5套PC操作系統。
<10
2008年美國裝有Windows的上網本所佔百分比。
96
2009年美國裝有Windows的上網本所佔百分比。
微軟潛台詞:即便上網本會幹掉PC,上網本的市場也是我們說了算。 Chrome OS?目前還是個傳說吧。等他們趕上我們的十分之一的時候再來叫板兒吧。或者至少上市以後再來。
0
2009年11月Windows Azure付費用戶數量。
10000
2010年6月Windows Azure付費用戶數量。
700000
肯塔基州公立學校中使用微軟雲計算效率工具的學生、老師和教員數量。肯塔基州是美國部署雲計算規模最大的州。
微軟潛台詞:Google和Salesforce在雲計算方面炒作得很厲害,但是看看微軟在很短的時間內做了什 麼。在肯塔基州我們才是贏家。
1600萬
美國排行前25的日報所有訂戶數。
1400萬
Netflix訂戶數。
2300萬
Xbox Live訂戶數
微軟潛台詞:Netflix很棒,但我們比它更大。所有人都在談論報紙的死亡,但我們比所有報紙加起來的規模都 大。
900萬
測試版Office 2010下載數,微軟歷史上規模最大的測試產品。
微軟潛台詞:Office不行了?笑話。
2140萬
一年中Bing新增用戶數。
微軟潛台詞:我們冒險進入了一個被壟斷的行業,並且獲得了很多用戶。以前我們做的不好,但我們的轉機出現了。 214萬,一年。
24%
2005年Linux服務器市場份額。
33%
2007年Linux服務器預計市場份額(2005年預測)。
21.2%
2009年第四季度Linux服務器實際市場份額。
微軟潛台詞:人們都說Linux將佔領市場,但他們錯了。
880萬
2010年第一季度全球iPhone銷量。
2150萬
2010年第一季度諾基亞智能手機銷量。
5500萬
2010年第一季度全球智能手機銷量。
4.39億
2014年全球智能手機預計銷量。
微軟潛台詞:這也iPhone,那也iPhone,閉嘴吧。 iPhone市場份額微乎其微。你怎麼不說諾基亞呢至少人家市場份額很高。
9
Salesforce.com獲得100萬付費用戶所需年數。
6
微軟Dynamics CRM獲得100萬付費用戶所需年數。
100%
Salesforce.com CEO在演講、小組會議、採訪、以及博客中提到微軟的機率。
微軟潛台詞:Salesforce最關注我們了。你認為他們比我們強?不一定。實現同樣的目標我們所用時間更 短。他們的CEO對我們如痴如醉,而我們可不會因為他們而失眠。
1.73億
Gmail全球用戶數。
2.84億
Yahoo!郵箱全球用戶數。
3.60億
Windows Live郵箱全球用戶數。
2.99億
Windows Live Messenger全球活躍用戶數。
1
Windows Live Messenger在全球即時通訊服務中的排名。
微軟潛台詞:用戶數還不到我們一半的Gmail?我們的Live Messenger用戶都比他們多。
57億美元
蘋果2009財年淨收入。
65億美元
Google 2009財年淨收入。
145億美元
微軟2009財年淨收入。
230億美元
微軟2000財年總收入。
584億美元
微軟2009財年總收入。
微軟潛台詞:是的,蘋果在市值方面超過了我們。但這沒意義。重要的是賺錢。更總要的是你能得到的錢。收入。蘋果 和Google都很了不起,但他們加在一起也沒我們收入多。不是五年前,也不是十年前,而是現在。
所有人都損我們的CEO,讓他走人。但你看看上面這些數字變化,他讓我們的收入翻了一番還多。其它公司做夢都想做到這一點。
English version by MG Siegler 編譯/techcrunchchina
微軟SQL Azure SU3已經在全球6個數據中心上線惠及中國
SQL Azure團隊在TechED上展示的SQL Azure Service Update 3已經上線,並且完成了一些重要的特性: 50GB數據庫的支持- 當數據庫容量增加到50GB,用戶可以在單個SQL Azure數據庫中存儲更多的數據。這將給你的應用提供這持續的擴展性。
關於SQL Azure的價格,以及如何創建和修改(在不同尺寸的SQL Azure數據庫間切換)你的數據庫,利用新的尺寸帶來的優勢,請參看這篇博客空間數據(Spatial Data)的支持– SQL Azure支持地形(Geography)和幾何(Geometry)數據類型,可以通過T-SQL進行空間數據查詢。
這是一個重大的特性,使得 Windows Azure平台能夠支持空間和位置感知的應用程序。層次ID(HierarchyID)數據類型- HierarchyID是一個長度變化的系統數據類型,能夠在數據庫中存儲樹形結構的數據。在新的特性之外,SQL Azure在2個新的數據中心上線了,提供給用戶更靈活性並惠及全球。
兩個新的數據中心一個在東亞、一個在西歐。
查看:SQL Azure SU3 is Now Live and Available in 6 Datacenters Worldwide
HTML5 動畫效果
新聞來源:queness.com
HTML5 的Canvas 對象將改變JavaScript 的使命,使之成為HTML5 下強大的動畫腳本編寫工具。本文介紹了8 個你從未見過的,基於HTML5 Canvas 和JavaScript 的動畫,這些令人難以置信的效果將使你對HTML5 徹底折服。需要指出的是,這些都是瀏覽器的原生動畫,無需任何插件。
Tunnelers
純JavaScript + HTML5 Canvas 生成的交互動畫,難以置信。
The Mesmerizer
在格子中移動鼠標,顏色隨著改變並擴散到周圍的格子,很迷幻。用鼠標點四角的格子,或按鍵盤,可以看到更奇妙的效果。
Burn
在頁面上移動鼠標,或按下鼠標,這樣的效果,很難相信是瀏覽器原生的。
Cheloniidae Live
也是基於純粹的JavaScript,不過使用了一個JavaScript 庫。很有趣,你可以通過修改其JavaScript 代碼實現自己的效果(可惜被牆了)。
Canvas 3D engine
一個基於 Canvas 的 3D 引擎。目前只支持預設的圖形,紋理及基本交互功能。
Bomomo
很值得一試。
DDD
這個交互動畫也很有趣。
Plasma Tree
非常阿凡達。
本文國際來源:queness.com 8 Simply Amazing HTML5 Canvas and Javascript Animations (原文作者 kevin)
.NET平台發布已十年
10年前,微軟承諾創建"下一代Internet"。 2000年,微軟比爾·蓋茨(Bill Gates)和史蒂夫·鮑爾默(Steve Ballmer)共同宣布了".NET",如今它已經成為軟件開發人員最青睞的平台之一。
2000年6月22日,鮑爾默在專業開發人員 大會(PDC)宣布了.NET,發表演講時,".NET"在他口中出現了62次。鮑爾默說:"什麼是.NET呢?.NET代表了一個環境,一種編程架構, 它將構架下一代Internet。"
隨著.NET平台的不斷發展,一種全新的適應.NET平台的高級語言C#也隨之誕生。 C#由Delphi之父Anders Hejlsberg開發,是.NET平台的主角。根據Tiobe的編程語言排行榜,C#今年已經上升到編程語言榜的第六位,僅次於Java、C、C++、 PHP、VB,從這裡也能看出.NET平台的受歡迎。
[轉載][譯]IE6終極備忘:修復IE6下 25+ Bugs
去年就想將IE的bug系統地整理下,但一直都忙於工作、學習沒有完成,看到這篇E文後,我毫不猶豫的放下了手中的工作將之翻譯出來。
由於是第一次譯文,所以錯誤在所難免,歡迎大家批評指正。
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻譯:http://www.vfresh.org/w3c/727(譯文對原文進行了補充)
對IE6最好的策略就是不去兼容它。
好吧,我知道你的難處,你不得不去兼容IE6這個狗血的瀏覽器,因此不得不在兼容IE6上花費很多時間。對此,我頗有同感,來讓我來幫助你吧。
我不會像許多文章那樣讓你去抵制IE6,這並不會幫助到你(迫不得已時)去兼容IE6;因為IE6依舊佔有一定的市場份額,你無法放棄IE6。
本文將幫助你來解決這個難題。
我查閱過很多資料來摘錄這些解決方案(有些是我自己提供的),現在我做成手冊提供給大家搞定IE6這個傢伙。我儘可能的提供了最優解決方案而不是一些hacks,並且提供了一些相關的資料。如果你發現有更好的方法或者本文有錯誤,請聯繫我。
【目錄】
【策略】
。
- IE6 市場佔有率
- 做一個簡潔的設計
- 使用合適的文檔申明 (doctype)
- 驗證你的代碼
- 先對標準瀏覽器進
行兼容
- 漸進增強 (Progressive Enhancement)
- 使用自己的預設樣式(CSS Reset)
- 使用JavaScript框架
- 使用JavaScript模擬
標準瀏覽器
【對IE6單獨兼容】
兼容IE6的第一步就是單獨對IE進行兼容,你針對IE6所寫的代碼隻影響IE6。
- 使用IE特有條
件註釋
- 使用CSS選擇器區分開IE6
【圖片】
- PNG半透
明圖片
- IE6下的圓角
【佈局】
解決IE6佈局方面的BUG非常的惱人!特別是在實現一個精美的設計稿時。
- 理解 hasLayout
- IE6 盒模型
- 最小高度
- 最大高度
- 100% 高度
- 最小寬度
- 最大寬度
- 雙邊距Bug
- 清除浮動
- 浮動層錯位
- 躲貓貓bug(The Guillotine Bug)
- 絕對定位元素的1像素間距bug
- 3像素間距bug
- IE下z-index的bug
【列表】
- 橫向列表寬度bug
- 列表階梯bug
【行為】
ie6有著一些行為方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微軟固執的使用了其私有方法。
- IE6中的:hover
- 在IE瀏覽其中使用Canvas標籤
【JavaScript】
IE6有著數不盡的JavaScript bug,這裡我不會講解每一個IE6下JavaScript的bug,只摘取其中幾個普遍的問題來討論。
- 異常: Expected Identifier, String, Or Number
【其他】
- 文本重
複Bug
- 收藏夾圖標
【相關資源】
【策略】
在討論IE6的BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然
。
目錄 | 頂部
IE6 市場佔有率
據Market Share統計,目前(2009年8月)IE6 的市場佔有率為25.25%,但是其他地方的統計明顯要低,為18.1%;儘管統計結果不同,但都呈現出了下降的趨勢(翻譯此文時,淘寶的IE6用戶
已從70%跌破至69%)。但是最重要的,還是你自己網站的統計數據。如果你對你的網站進行了流量分析,那麼IE6的佔有率是否值得你去針對 IE6進行開發?這需要你自己去權衡。
如果你網站絕大部分訪問者不使用IE6並且不付費給你,那麼你不必特意區針對IE6做兼容,從而節省時間、精力及資金。
目錄 | 頂部
做一個簡潔的設計
在做設計的同時考慮代碼的實現,可以避免一些佈局上的問題。再複雜的設計稿也能用簡潔的代碼實現,如果你使用了過於繁冗的標籤,那麼你需要重新修繕
設計稿。
如果你有豐富的開發經歷,攻克過很多種佈局難題,記錄下你的解決方案,在以後碰到相同問題時可以提高開發效率。
目錄 | 頂部
使用合適的文檔申明(doctype)
使用一個錯誤的文檔聲明會觸發quirks mode(怪異模式),正確的文檔聲明可以保證你的頁面在所有瀏覽器下保持一致的效果。使用其中的一個文檔申明:HTML 5, HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
HTML 5
html
<!DOCTYPE HTML>
HTML 4.01 Strict
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Transitional
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
目錄 | 頂部
驗證你的代碼
我曾聽說過有些人認為校驗代碼沒有任何實用價值,但我不這麼認為。校驗僅僅只需花費一點點時間,而且將受益於所有瀏
覽器而非僅僅IE6;驗證確保了向後兼容並且易於維護。至少也得驗證XHTML!唯一可以忽略驗證的情況是在你打算使用CSS3時。
你可以使用w3提供的工具驗證XHTML/驗
證CSS
目錄 | 頂部
先對標準瀏覽器進行兼容
在寫代碼的過程中,一開始在標準瀏覽器中測試(如 Firefox, Opera, Chrome等),然後再去測試非標準瀏覽器(如IE6/IE7),因為這些標準瀏覽器都遵循w3c標準,大多的處理方式都相同。你可以分開來單獨去兼容
「特別」的IE瀏覽器,這樣做能規範你的代碼,你將會因此擁有紮實的基礎;而且如果你不再需要兼容這些非標準瀏覽器,你可以一次性刪除這些修復兼容性代
碼。
目錄 | 頂部
漸進增強(Progressive Enhancement)
漸進增強(Progressive Enhancement)是為了確保沒有頁面特效後基本功能也是可用的。簡單來講,漸進
增強是指在確保頁面在禁用JavaScript後能正常運作後,再對頁面添加各種特效(JavaScript動畫、Ajax異步等等)。我們同樣可以運用
「漸進增強」原則來使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web規範。
某些情況下,是無法讓所有用戶在任何瀏覽器下都完全一模一樣,特別是那些使用IE6的用戶。運用漸進增強策略,可以保證讓那些用戶至少使用到你網站
(或網絡應用)的基本功能。
更多漸進增強的資料:
- 理解漸進增強(譯文)
- Understanding Progressive Enhancement
- Progressive Enhancement With CSS
- Progressive Enhancement: What It Is, And How To Use It?
- Graceful Degradation vs. Progressive Enhancement
目錄 | 頂部
使用自己的預設樣式(CSS Reset)
每個瀏覽器都有各自不同的預設樣式,在你的樣式表之前使用預設樣式(CSS Reset)可以避免在之後編寫冗長的瀏覽器兼容樣式。在網上有很多CSS Reset可供參考。
簡單CSS Reset示例:
css
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
一些可供參考的CSS Resets:
- YUI CSS Reset
- Eric Meyer』s Reset Reloaded
目錄 | 頂部
使用JavaScript框架
如果你的網站使用了較多的JavaScript特效,建議使用JavaScript框架。大部分的js框架都兼容了包括IE6在內的各種瀏覽器。可
選的框架有很多,但一般能用一種框架實現的效果一定可以用另外一種框架實現,所以你可以根據個人喜好來選擇合適的框架。
以下是一些常用的JavaScript框架:
- MooTools
- jQuery
- ProtoType with Scriptaculous
- Dojo
強烈推薦實用MooTools,但如果你是入門者,還是建議使用jQuery。
目錄 | 頂部
使用JavaScript模擬標準瀏覽器
現在有一些JavaScript來使IE模擬標準瀏覽器,如果你有較高比例的用戶使用IE6並且開啟了JavaScript,可以考慮使用Dean Edwards的IE7或者類似的腳本。
譯者註:不建議使用這些腳本,因為這些「模擬」的實現往往會消耗大量的資源,IE本來就夠爛了。
目錄 | 頂部
如何在IE下調試頁面
在IE下調試頁面很麻煩,Firefox下的擴展程序Firebug和Web Developer Toolbar都是很好用的工具,如果你想在IE或其他瀏覽器上使用firebug,可以用Firebug Lite。
在IE下有兩種最好的調試方法:IE Collection和IETester,
並且都是免費的(雖然有一點點缺陷)。IETester的開發者也提供了DebugBar這款IE插件免費供個人使用,但商業用戶只可試用60天。
目錄 | 頂部
【對IE6單獨兼容】
兼容IE6的第一步就是單獨對IE進行兼容,你針對IE6所寫的代碼隻影響IE6;有幾種方法可以區分開IE6:IE特有條件註釋、CSS選擇器、 JavaScript,我們將逐一討論。
目錄 | 頂部
使用IE特有條件註釋
微軟給IE添加了條件註釋以區分不同版本,任何東西都可以塞進條件註釋裡:標籤、JavaScript、js文件、css、內聯樣式。可以使用條件
註釋來針對某一個IE瀏覽器版本來編寫代碼。
規則如下:(譯註:可參考IE 特有註釋(hack))
html
使用條件註釋加載css的好處是這些樣式是獨立於其他css文件的,因此不會在編寫兼容代碼時弄得一團糟;而且當IE6的市場份額降低到不需要兼容<p>這段文字會在所有瀏覽器顯示</p> <!--[if lte IE 6]> <p>這段文字僅顯示在 IE6及IE6以下版本。</p> <p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> <![endif]--> <!--[if gte IE 6]> <p>這段文字僅顯示在 IE6及IE6以上版本。</p> <p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p> <![endif]--> <!--[if gt IE 6]> <p>這段文字僅顯示在 IE6以上版本(不包含IE6)。</p> <p>This message will only appear in versions of Internet Explorer greater than version 6.</p> <![endif]--> <!--[if IE 5.5]> <p>這段文字僅顯示在 IE5.5。</p> <p>This message will only appear in Internet Explorer 5.5.</p> <![endif]--> <!--在 IE6及IE6以下版本中加載css--> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" /> <![endif]--> <p>這段文字會在所有瀏覽器顯示</p>
時,可以快速的清理掉。
使用條件註釋的唯一缺點是在IE瀏覽器下會增加額外的HTTP請求數,所以需要權衡是否這樣做。但我不建議使用條件註釋加載外部js文件,因為js 文件會造成阻滯,在js未加載完之前其餘文件都不會被加載;對於js請使用JavaScript程序來區分瀏覽器而非條件註釋。
目錄 | 頂部
使用CSS選擇器區分開IE6
如果你不打算使用條件註釋,CSS選擇器是另外一個區分開IE6的辦法,IE6不支持子選擇器;先針對IE6使用常規申明CSS選擇器,然後再用子
選擇器針對IE7+及其他瀏覽器。
示例:
html
這個方法的缺點是容易把樣式表弄得一團糟,所以一定要寫好註釋說明。<style type="text/css" > /* IE6 專用 */ .content {color:red;} /* 其他瀏覽器 */ div>p .content {color:blue;} </style> <div> <p class="header">Some Header Text Here</p> </div>
在示例中,針對IE6寫的樣式在其他瀏覽器中也會執行,但(標準瀏覽器中)之後的子選擇器覆蓋了之前的申明,而IE6不支持子選擇器所以忽略了它。
擴展閱讀:
- CSS Browser Compatibility Chart
目錄 | 頂部
使用JavaScript區分開IE6
如果你想要使用JavaScript區分開IE6,請看示例:
javascript
//原生JavaScript if(typeof document.body.style.maxHeight === "undefined") { alert('IE6 Detected'); } //MooTools(框架) if (Browser.Engine.trident4) { alert('IE6 Detected'); } //jQuery(框架) if (($.browser.msie) && ($.browser.version == "6.0")){ alert('IE6 Detected'); }
擴展閱讀:
- Quirksmode』 s Browser Object
- MooTools』 Browser Object
目錄 | 頂部
【圖片】
目錄 | 頂部
PNG半透明圖片
有很多JavaScript解決方案來修復IE6使用PNG-24圖片,但除了Twin Helix』s IE5.5+ PNG Alpha Fix都不支持CSS sprites。
另外一個辦法是使用IE特有的濾鏡,可閱讀Aaron Baxter的博客。或譯者的《ie5+ PNG Fix》
JavaScript方式修復IE6 PNG
- MooTools』 FixPNG
- jQuery PNG fix
- IE PNG Fix by Twin Helix
- TweakPNG
目錄 | 頂部
IE6下的圓角
可以詳細閱讀CSS 圓角菜單。
目錄 | 頂部
背景閃爍問題
如果你給鏈接、按鈕用CSS sprites作為背景,你可能會發現在IE6下會有背景圖閃爍的現象。造成這個的原因是由於IE6沒有將背景圖緩存,每次觸發hover的時候都會重新
加載,可以用JavaScript設置IE6緩存這些圖片:
javascript
document.execCommand("BackgroundImageCache",false,true);
其他解決方法:
目錄 | 頂部
【佈局】
解決IE6佈局方面的BUG非常的惱人!特別是在實現一個精美的設計稿時。
目錄 | 頂部
理解 hasLayout
許多IE6下的Bug及渲染問題都可以歸於微軟的私有概念hasLayout。簡要的
說,在給元素定義具體的尺寸(如height或width)
就會觸發hasLayout,在IE6下缺失或觸發hasLayout會導致一些bug。
擴展閱讀:
- 《On having layout》(譯文)
- 「HasLayout」 Overview from Microsoft
IE6 盒模型
如果怪
異模式(quirks mode)在IE6中啟用,IE6將會使用微軟舊版的盒模型:width是元素的實際寬度,內容寬度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的辦法是申明正確的文檔類型以避免觸發怪
異模式,或者避免給有border或padding的
元素定義width屬性。當然你也可以考慮使用條件註釋。
擴展閱讀:
- IE CSS Tricks That Will Get You Every Time
- Internet Explorer And The CSS Box Model
目錄 | 頂部
最小高度
IE6 不支持min-height屬性,但它卻認為height就是最小高度。感謝Dustin Diaz提供了一個很好的方法:使用!important,ie6會忽視它但其餘瀏
覽器不會。
註:IE6在同一個聲明語句中(即一個綜括號{})的屬性定義,後面的總
是會覆蓋前面的,所以下例中後面的height覆蓋掉了前面定義的important height
css
另一個方法是使用CSS 選擇器:/* 所有瀏覽器 */ #container {min-height:200px; height:auto !important; height:200px;}
css
/* 僅IE6 */ #container {min-height:200px; height:200px;} /* 其他瀏覽器 */ html>body #container { height:auto;}
目錄 | 頂部
最大高度
非常遺憾,在IE6下實現max-height只能使用IE特有濾鏡,或者可以使用 JavaScript實現。我個人更建議使用JavaScript來解決,因為IE濾鏡會消耗大量資源甚至會使瀏覽器崩潰,而且禁用JavaScript 後這兩種方法都無法生效。
JavaScript
javascript
//直接使用ID來改變元素的最大高度 var container = document.getElementById('container'); container.style.height = (container.scrollHeight > 199) ? "200px" : "auto"; //寫成函數來運行 function setMaxHeight(elementId, height){ var container = document.getElementById(elementId); container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto"; } //函數示例 setMaxHeight('container1', 200); setMaxHeight('container2', 500);
目錄 | 頂部
100% 高度
在IE6下,如果要給元素定義100%高度,必須要明確定義它的父級元素的高度,如果你需要給元素定義滿屏的高度,就得先給html和body定義height:100%;。
css
/* 給child元素定義100%高度(IE6)*/ #parent {height:500px;} #child {height:100%;} /* 定義滿屏高度(IE6)*/ html, body {height:100%;} #fullLength {height:100%;}
目錄 | 頂部
最小寬度
同max-height和max-width一
樣,IE6也不支持min-width。有2個方法實現最小寬度,使用額外的標籤、使用JavaScript。
javascript
目錄 | 頂部//直接使用ID來改變元素的最小寬度 var container = document.getElementById('container'); container.style.width = (container.clientWidth < width) ? "500px" : "auto"; //寫成函數來運行 function setMinWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth < width) ? width + "px" : "auto"; } //函數示例 setMinWidth('container1', 200); setMinWidth('container2', 500);
最大寬度
只能使用JavaScript。
javascript
//直接使用ID來改變元素的最大寬度 var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; //寫成函數來運行 function setMaxWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; } //函數示例 setMaxWidth('container1', 200); setMaxWidth('container2', 500);
目錄 | 頂部
雙邊距Bug
當元素浮動時,IE6會錯誤的把浮動方向的margin值雙倍計算。Steve Clason給出了解決方法:給元素添加display:inline;
css
/*IE6下將產生雙倍邊距*/ .floatedEl {float:left; margin-left:100px;} /*修正*/ .floatedEl {float:left; margin-left:100px; display:inline;}
目錄 | 頂部
清除浮動
如果你想用div(或其他容器)包裹一個浮動的元素,你會發現必須給div(容器)定義明確的height、width、overflow之中一個屬性
(除了auto值)才能將浮動元素嚴實地包裹。
示例:
html
css<div id="container"> <div id="floated1"></div> <div id="floated2"></div> </div>
譯者常用的方式:#container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;}
css
#container {zoom:1;} /* ie瀏覽器 */ #container:after{content:"\0020";display:block;height:0;clear:both;} /*標準瀏覽器*/
擴展閱讀:
- 《清
理浮動的全家》
- Clearing Floats
目錄 | 頂部
浮動層錯位
當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在Firefox、IE7及其他標準瀏覽器裡,超出的內容僅僅只是超出邊緣;但在IE6中容
器會忽視定義的width值,寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之後還跟
著一個浮動元素,那麼就會導致錯位問題。
浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法,雖然可以使用overflow:hidden;或overflow:scroll;來修正,但hidden容
易導致其他一些問題,scroll會破壞設計;JavaScript也沒法很好地解決這個問
題。所以我的建議是一定要避免這個問題發生,使用一個固定的佈局或者控制好內容的寬度。
擴展閱讀
- Float Drop – floated elements drop below their expected position
目錄 | 頂部
躲貓貓bug
在IE6和IE7下,躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素,如果在他之後有不浮動的內容,並且有一些定義了:hover的鏈接,當鼠標移到那些鏈接上時,在IE6下就會觸發躲貓貓。
點
此查看bug示例頁
頭大了吧!但別擔心,well-documented提供了詳細的解決方法。
不管為何會觸發這個問題,解決方法很簡單:
- 在(那個未浮動的)內容之後添加一個<span style="clear:both;"></span>
觸發包含了這些鏈接的容器的hasLayout,一個簡單的方法就是給其定義height:1%;
擴展閱讀:
目錄 | 頂部
絕對定位元素的1像素間距bug
IE6下的這個錯誤是由於進位處理誤差造成(IE7已修復),當絕對定位元素的父元素高或寬為奇數時,bottom和right會產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值,但對於液態佈局沒有完美的解決方
法。Paul O』Brien有關這個 bug有一篇文章來講解。
擴展閱讀:
目錄 | 頂部
3像素間距bug
在IE6中,當文本(或無浮動元素)跟在一個浮動的元素之後,文本和這個浮動元素之間會多出3像素的間隔,Stu Nichols有一個非常好的解決方法。
譯註:可運行下面代碼來查看作者提供的修複方法
html
目錄 | 頂部<style type="text/css"> .container {width:750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;} .container #page1,.container #page2 {width:30%; margin:0 auto 0 auto; padding-top:80px;} .container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);} .container .topLeft {overflow:hidden; width:20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);} .container .topRight {overflow:hidden; width:25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);} .container .content {height:100px; margin-right:25px; background:#ccc;} .container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;} .container .midLeft {width:20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);} .container .midRight {width:25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);} .container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);} .container .bottomLeft {overflow:hidden; width:20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);} .container .bottomRight {overflow:hidden; width:25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);} /* 給浮動層添加 display:inline 和 -3px 負值margin */ .container #page2 .topLeft, .container #page2 .midLeft, .container #page2 .bottomLeft {display:inline;margin-right:-3px;} .container #page2 .topRight, .container #page2 .midRight, .container #page2 .bottomRight {display:inline;margin-left:-3px;} /* 給中間的內容層定義 margin-right 以糾正-3px */ * html #page2 .content {margin-right:22px;} </style> <div class="container"> <div id="page1"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>【3px Bug】</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div> <div class="container"> <div id="page2"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>【3px Bug 已修正!】</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div>
IE下z-index的bug
在IE瀏覽器中,定位元素的z-index層級是相對於各自的父級容器,所以會導致z-index出現錯誤的
表現。解決方法是給其父級元素定義z-index,有些情況下還需要定義position:relative
擴展閱讀:
- z-index在IE中的迷惑
- 無法衝破的等級
目錄 | 頂部
Overflow Bug
在IE6/7中,overflow無法正確的隱藏有相對定位position:relative;的子元素,如下例:
html
解決方法就是給外包容器.wrap加上position:relative;。<style type="text/css" > .wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;} .child {position:relative;width:50px;height:200px;background:#99CC00;} </style> <div class="wrap"> <div class="child"> </div> </div>
目錄 | 頂部
【列表問題】
最為特別的IE許多bug都會影響到列表,這裡例舉了一些示例。
目錄 | 頂部
橫向列表寬度bug
如果你使用float:left;把<li>橫
向擺列,並且<li>內包含的<a>(或
其他)觸發了hasLayout,在IE6下就會有錯誤的表現:
html
解決方法很簡單,只需要給<a>定義同樣的float:left;即可。<style type="text/css" > #menu li { float:left; list-style:none; background:#CCCCFF; } #menu li a { padding:0 10px; display:block; height:20px; /* 觸發了hasLayout */ } </style> <ul id="menu"> <li><a href="#" title="">Menu Item #1</a></li> <li><a href="#" title="">Menu Item #2</a></li> <li><a href="#" title="">Menu Item #3</a></li> </ul>
目錄 | 頂部
列表階梯bug
bug示例:
html
<style type="text/css" > ul { clear: both; list-style: none; } a { display: block; float: left; background: #99CCFF; } #two a { font-size: 1.1em; } </style> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <ul id="two"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul>
列表階梯 bug通常會在給<li>的子元素<a>使用float:left;時
觸發,我們本意是要做一個橫向的列表(通常是導航欄),但IE卻可能呈現出垂直的或者階梯狀。
解決辦法就是給<li>定義float:left;而
非子元素<a>,或者給<li>定
義display:inline;也可以解決。
目錄 | 頂部
垂直列表間隙bug
當我們使用<li>包含一個塊級子元素時,IE6(IE7也有可能)會錯誤
地給每條列表元素(<li>)之間添加空隙;解決這個問題的方法有很多,看示例:
BUG代碼:
html
<style type="text/css" > ul {margin:0; padding:0; list-style:none;} li a {display:block; background:#ddd;} </style> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul>
解決方法:
Jon Hicks把<a>flaot並
且清除float來解決這個問題:
css
另外一個辦法就是觸發<a>的hasLayout(如ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}
定義高寬、使用zoom:1;)
css
也可以給<li>定義display:inline;來ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; zoom:1;} /* height:1%; 也有同樣的作用 */
解決此問題。
另外還有一個極有趣的方法,給<a>包含的文本末尾添加一個空格:
html
<ul> <li><a href="#">Item 1 </a></li> <li><a href="#">Item 2 </a></li> <li><a href="#">Item 3 </a></li> </ul>
擴展閱讀:
- Fixing the IE6 Whitespace Bug
目錄 | 頂部
【行為】
ie6有著一些行為方面的BUG,究其原因是IE6版本太老了,不能完好地支持CSS2更不支持CSS3,而且微軟固執的使用了其私有方法。
目錄 | 頂部
IE6中的:hover
在IE6中,除了<a>(需要有href屬
性)才能觸發:hover行為,這妨礙了我們實現許多鼠標觸碰效果,但還是有一些法子是可以解
決它的。
最好是不要用:hover來實現重要的功能,僅僅只用它來強化效果。
許多修復IE6 hover的方法都是使用微軟提供的私有方法behavior或
者JavaScript,通常使用JavaScript 框架或者IE6修復類js。
目錄 | 頂部
在IE瀏覽其中使用Canvas標籤
canvas是 HTML5新引入的元素,提供了通過 JavaScript 繪製圖形的方法,此方法使用簡單但功能強大。
所有IE瀏覽器都不支持HTML5中的canvas標籤,而是使用它微軟私有的VML,但是可以通過JavaScript來使canvas在IE下
生效。
修復canvas的一些JavaScript:
- ExplorerCanvas (also called excanvas)
- ExplorerCanvas Google Group
MooCanvas at Github, a MooTools implementation of excanvas目錄 | 頂部
IE6調整窗口大小的 Bug
當把body居中放置,改變IE瀏覽器大小的時候,任何在body裡面的相對定位元素都會固定不動了。Emil Stenström發現了IE6 Resize Bug並提供瞭解決辦法:給body定義position:relative;就行了,夠簡單吧!~
目錄 | 頂部
【JavaScript】
IE6有著數不盡的JavaScript bug,這裡我不會講解每一個IE6下JavaScript的bug,只摘取其中幾個普遍的問題來討論。
目錄 | 頂部
Error: Expected Identifier, String, Or Number
IE瀏覽器不容許不良的JavaScript書寫,如果在數組或者Hash對象的末尾有逗號就會引發異常「Expected Identifier, String, Or Number」,其他瀏覽器允許這樣做,但在書寫時注意刪除末尾的逗號以避免這個錯誤。
目錄 | 頂部
IE中JavaScript內存洩露
由於IE瀏覽器使用其自己的內存管理,當JavaScript使用的內存沒有被回收時就會引發內存洩露。可閱讀《JScript的內
存洩漏》及《Finally, the alternative fix for IE6』s memory leak is available》
目錄 | 頂部
【其他】
IE6中一些其他bug
目錄 | 頂部
文本重複Bug
在IE6中,一些隱藏的元素(如註釋、display:none;的元素)被包含在一個
浮動元素裡,就有可能引發文本重複bug:
html
<style type="text/css" > .demobox { width: 250px; border: 3px solid #4c6f42; } .firstfloat { float: left; background: #939a90; } .secondfloat { float: left; width: 250px; margin-bottom: 2px; background: #fbdabb; } </style> <!-- Begin live demo --> <div class="demobox"> <div class="firstfloat">第一個浮動層</div> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <div class="secondfloat"> 第二個浮動層<br /> <span style="background: #f2ab82;">aa這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。</span> </div> <div style="clear: both; background: #b2d4af;">清除浮動層</div> </div> <!-- end live demo -->
Position Is Everything詳細講解了這個問題,但解決辦法很簡單:給浮動元素添加display:inline;。
css
目錄 | 頂部.firstfloat {display:inline;}
IE的收藏夾圖標(Favicons)
收藏夾圖標會以16×16像素大小顯示在你的收藏夾裡,有兩種方法來顯示收藏夾圖標:
- 把一張圖片命名為favicon.ico並放置在網站的根目錄,IE及其他瀏覽區都會
自動設置該文件為收藏夾圖標;
在<head>區域聲明:需要注意的是收藏夾圖標會被一直緩存,除非你清除瀏覽器的緩存,才會更新新的圖標;如果你想要瀏覽者自動更新收藏夾圖標,請給 favicon.ico設置expires。
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
擴展閱讀:
目錄 | 頂部
IE6的GZip
服務器端使用GZip壓縮了的文件,在某些版本的IE6(特別是未更新XP sp2的)中會有一些問題。所幸的是Seb Duggan找到了IE6 GZip bug解決方法,在Apache中使用ISAPI_Rewrite。
Seb提供的方法是在 ISAPI_Rewrite 安裝目錄下的httpd.conf中
加入以下代碼:
html
RewriteEngine on RewriteCond %{HTTP:User-Agent} MSIE [56] RewriteCond %{HTTP:User-Agent} !SV1 RewriteCond %{REQUEST_URI} .(css|js)$ RewriteHeader Accept-Encoding: .* $1
訂閱:
文章 (Atom)