IE曆來被web標準的擁護者所詬病，而當FireFox橫空出世以後，更多的網頁製作者開始關注web標準設計。看著FireFox的市場佔有率不停的上升，微軟終於推出了IE7。但IE7是否真的能夠力挽狂瀾，是否真的能夠得到使用者的信任，是否真的能夠得到網頁設計者的認可呢？
且看《IE7的web標準之道》系列文章，和你一起見證IE7的改變！
躲貓貓，你來找我呀！在上一篇文章中，我們曾經提到過這個bug，它的著名來源於它所表現出來的詭異現象。雖然今天是4月1日，但是這些都是真實的。為了大家能夠進一步的記住這個詭異的bug，這裡我將改變以往的寫作方式，而是首先將現象示範給大家看。為了更好的表現出效果，這次我採用了flash的記錄方式，點擊這個表徵圖 即可看到flash映像。如果，你的瀏覽器不支援flash播放，請你直接下載flash檔案，採用其他軟體查看，給你帶來不便，請諒解。
如果只看上面的片，你可能感覺有些納悶。這是什麼呀？不就是一個普通的沒啥字的網頁嗎，沒啥了不起的呀。但是當你看到這個網頁的源碼的時候，也許就會感到驚訝了——
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="Keywords" content="YES!B/S!,web標準,楊正禕,部落格園,執行個體代碼" /><br /><meta name="Description" content="這是一個簡單YES!B/S!文章樣本頁面,來自楊正禕的部落格,http://justinyoung.cnblogs.com/" /><br /><title>YES!B/S!文章樣本頁面</title><br /><style type="text/css"><br />#holder{<br />background-color:pink; /***引起bug的重要因素，一種解釋就是：那些消失的文字躲到了背景之後***/<br />/*** width:100%; 對最大的容器設定寬度，相對寬度和絕對寬度都可以，即可修正bug ***/<br />}<br />#holder a:hover{<br />background-color:deeppink; /***為了增強視覺效果而已，可以去掉。***/<br />}<br />#floater{<br />float:right; /***引起bug的重要因素***/<br />width:135px;<br />height:310px; /***引起bug的重要因素，高度一定要大於那些文字的高度***/<br />border:1px solid green;<br />}<br />.clear{<br />clear:both; /***引起bug的重要因素***/<br />}<br />#footer{ /***為了增強視覺效果而已，可以去掉。***/<br />height:50px;<br />border-top:1px solid blue;<br />}<br /></style><br /></head><br /><body><br /><div id="holder"><br /><div id="floater"><br />i'm floater!<br/ /><br /><a href="#" title=""><img alt="躲貓貓bug" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_2q/ie7road81.jpg" /></a><br /></div><!--end: floater --><br /><div id="ghostHolder"><br />這個樣本是為了示範IE6的“躲貓貓bug”，如果你用IE6瀏覽器瀏覽這個頁面的時候，就會發現你看不到這些字了 囧rz~ 。<br/ /><br />IE7已經修正了這個bug，所以你用IE7瀏覽這個頁面的時候，就能看到這些文字啦。<br/ /><br />這個樣本頁面來自楊正禕的部落格<a target="_blank" href="http://justinyoung.cnblogs.com/" title="web標準推薦部落格">【YES!B/S!】</a>，是<a target="_blank" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" title="《IE7的web標準之道》">《IE7的web標準之道》</a>的系列文章中的一篇，此系列文章還在連載中，下面是已經發表的文章列表——<br /><ul style="list-style-type: disc"><br /><li><a title="《IE7的web標準之道——1：前言》 " href="http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" target="_blank">《IE7的web標準之道——1：前言（兼目錄）》 </a> </li><br /><li><a title="IE7的web標準之道——2：（改進）更豐富的CSS選擇符" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html" target="_blank">《IE7的web標準之道——2：（改進）更豐富的CSS選擇符》</a> </li><br /><li><a title="IE7的web標準之道——3：（修正）引起頁面配置混亂的禍首" href="http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_overflow.html" target="_blank">《IE7的web標準之道——3：（修正）引起頁面配置混亂的禍首》</a> </li><br /><li><a title="IE7的web標準之道——4：（修正）歌劇院魅影bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/03/IE7_wsRoad_dup_characters.html" target="_blank">《IE7的web標準之道——4：（修正）歌劇院魅影bug》</a> </li><br /><li><a title="IE7的web標準之道——5：（修正）上去了！終於上去了！" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/11/IE7_wsRoad_div_select.html" target="_blank">《IE7的web標準之道——5：（修正）上去了！終於上去了！》</a> </li><br /><li><a title="IE7的web標準之道——6：(修正)置換元素與行距bug" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/20/line-height-bug.html" target="_blank">《IE7的web標準之道——6：（修正）置換元素與行距bug》</a> </li><br /><li><a title="IE7的web標準之道——7：（修正）float雙倍margin bug " href="http://www.cnblogs.com/JustinYoung/archive/2008/03/27/double-margin-float-bug.html" target="_blank">《IE7的web標準之道——7：（修正）float雙倍margin bug 》</a> </li><br /></ul><br /></div><!--end: ghostHolder --><br /><div class="clear"></div><br /><div id="footer"><br />i'm footer from <a target="_blank" href="http://justinyoung.cnblogs.com/" title="web標準推薦部落格">【YES!B/S!】</a><br /></div><br /></div><!--end: holder --><br /></body><br /></html><br />提示：可以先在文字框內，根據需要修改代碼後再運行貓貓躲到哪裡去了呢？
看後源碼，是否感到奇怪呢？那大片大片的文字都跑到那裡去了呢？答案和往常一樣令人遺憾——沒有任何官方的說明和解釋，只有江湖上比較得到認可的答案。
江湖上比較認可的解釋是——被id為“#holder”那個div的背景顏色給蓋住了。至於為什麼會蓋住，除了當初的IE6Team Dev，沒有人能給你答案。江湖上比較認可的說法是IE6對z-index的解釋有問題。無論原因如何，但是效果卻是的確產生了，這也的確是IE6的一個bug。好在，我們有辦法可以解決它。
如何找到貓貓？其實方法還蠻多的，如果仔細看網頁原始碼中關於CSS部分的注釋，其實就已經可以找到一些答案。這裡列出一些方案，供大家參考。如果你有更好的辦法，請到【部落格園web標準設計小組】賜教，小弟這裡先謝過了。只要採用下面方法的任意一種即可消滅bug——
上面的方法只是理論上的，請根據實際需要採用不同的方法。另：這個bug在FireFox、safari、opera等瀏覽器下不會出現。因此本篇就沒有。
外話：插一句和關於系列文章插一句以前有讀者朋友問到：“這不是《IE7的web標準之道》嗎？為什麼講的都是IE6的一些bug呀？有什麼意義呀？”。其實意義很簡單，這個系列講到的所有bug，都是IE6中存在的，並且在IE7中已經得到修正的。是IE7相對於IE6的一種進步，也是IE7相對於IE6而言，更向web標準靠近的一種證明。現在瀏覽器市場IE6的份額依然很高，正是IE6、IE7和FireFox三分天下的時候。講這些IE6專屬的bug，並給出解決方案，對於如何讓你的網頁能夠相容更多的瀏覽器，如何讓你的網頁更健壯還是有些作用的（至少我是這樣認為的 ^_^）。並不是說，你一個人使用的瀏覽器是IE7，或者說你周圍朋友的瀏覽器是IE7，就能說明世界上所有的人都在使用IE7瀏覽器。作為網頁的瀏覽者，你的確可以不在乎這些東西，但是作為苦命的網頁製作者，這些東西還是有一定的作用的。可能是因為我以前沒有說明清楚，所以給你帶來了誤解，抱歉。
關於系列文章現在我主要在維護的兩個系列是《IE7的web標準之道》、《阿一web標準學堂》。其中《IE7的web標準之道》是面向有一定網頁製作基礎的朋友的，而《阿一web標準學堂》則傾向於web標準初學者的朋友。為了更形象和生動，《阿一web標準學堂》採用視頻講解的方式（其實順便強迫自己鍛煉普通話也是重要原因 囧rz~），希望大家能對視頻中我的普通話進行監督哦。這兩個系列的更新頻率，我會努力控制在一周一篇（講）。
另外的還有三個系列——《執行個體講解IE8新特性》、《大家一起來博皮》以及《惡俗分享歌曲》系列。因為小弟時間和精力有限，所以只能在工作比較閒置時候，不定期更新。對於關注這個3個系列的朋友，只能表示抱歉。
相關文章資源清單Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
