IE曆來被web標準的擁護者所詬病，而當FireFox橫空出世以後，更多的網頁製作者開始關注web標準設計。看著FireFox的市場佔有率不停的上升，微軟終於推出了IE7。但IE7是否真的能夠力挽狂瀾，是否真的能夠得到使用者的信任，是否真的能夠得到網頁設計者的認可呢？
且看《IE7的web標準之道》系列文章，和你一起見證IE7的改變！
互連網上沒有郵局！看看下面這幅圖，感覺是不是很親切呢？有種“信紙”的感覺吧。其實這種感覺真的很不錯哦，很懷舊、很小資的味道（突然想起以前我寫的那些情書了^_^）。但是，你遊遍互連網，便會發現，很少有類比信紙布局的網頁。這到底是為什麼呢？難道是大家都沒有想到嗎？難道是大家真的已經把“信”這種東西忘記了？還是因為互連網上沒有郵局來寄出這些信件呢？
類比信紙的網頁
其實都不是，不是沒有人想到，也不是沒有人願意用，而是被一種“蟲”咬怕了。而這隻“蟲”就是我們今天要講的——“置換元素與行距bug”。
臭蟲顯身！這裡有兩個測試用的樣本頁面。第一個是文章主體沒有包含置換元素（replaced element）， bug不會作怪的例子。而第二個是文章主體中包含了置換元素（樣本中為<img>）時，bug在IE6瀏覽器下會作怪的例子。
在舉例之前，先讓我們瞭解一下，什麼是置換元素（replaced element）——
“An element for which the CSS formatter knows only the intrinsic dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements. For example, the content of the IMG element is often replaced by the image that the "src" attribute designates. CSS does not define how the intrinsic dimensions are found.”資料來源於W3C網站對replaced element的定義
一來自己的英語水平太爛，二來這段英語比較簡單，所以俺這裡就不翻譯了，大致意思大家應該都看得懂。
測試用樣本頁面1源碼<!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 />#lineheight_bug {<br />line-height: 39px;<br />font-size:14px;<br />background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;<br />padding:0;<br />padding-left:20px;<br />height:435px;<br />width:530px;<br />border:1px solid red;<br />}<br /></style><br /></head><br /><body><br /><div id="lineheight_bug"><br /><p>這是一個用來示範line-height bug的執行個體。它來自《IE7的web標準之道——6：(修正)置換元素與行距bug》一文。而這篇文章是屬於《IE7的web標準之道》系列文章的。《IE7的web標準之道》系列文章是個文章系列，主要講解了IE7相對於IE6各個方面的修正和改進。對於網頁設計者從將網頁設計從IE6平穩的過渡到IE7平台有一定的指導意義。現在《IE7的web標準之道》系列文章已經出道第六篇了。前面五篇的標題分別是：《IE7的web標準之道——1：前言(兼目錄)》 ,《IE7的web標準之道——2：(改進)更豐富的CSS選擇符》 ,《IE7的web標準之道——3：(修正)引起頁面配置混亂的禍首 》 , 《IE7的web標準之道——4：(修正)歌劇院魅影bug 》 以及《IE7的web標準之道——5：(修正)上去了！終於上去了！ 》。如果你有興趣，可以訪問http://justinyoung.cnblogs.com/。謝謝。</p><br /></div><br /></body><br /></html><br />提示：可以先在文字框內，根據需要修改代碼後再運行
讓我們來看看樣本頁面1在IE6和IE7下的顯示結果，可以看出其實沒有什麼區別的。（IE6和IE7的共存方法可以參看《IE6、IE7、IE8共存方法 》一文）——
<!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 />#lineheight_bug {<br />line-height: 39px;<br />font-size:14px;<br />background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;<br />padding:0;<br />padding-left:20px;<br />height:435px;<br />width:530px;<br />border:1px solid red;<br />}<br /></style><br /></head><br /><body><br /><div id="lineheight_bug"><br /><p>這是一個用來示範line-height bug的執行個體。它來自《IE7的web標準之道——6：(修正)置換元素與行距bug》一文。而這篇文章是屬於《IE7的web標準之道》系列文章的。《IE7的web標準之道》系列文章是個文章系列，主要講解了IE7相對於IE6各個方面的修正和改進。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="這就是置換元素的一種" /> 對於網頁設計者從將網頁設計從IE6平穩的過渡到IE7平台有一定的指導意義。現在《IE7的web標準之道》系列文章已經出道第六篇了。前面五篇的標題分別是：《IE7的web標準之道——1：前言(兼目錄)》 ,《IE7的web標準之道——2：(改進)更豐富的CSS選擇符》 ,《IE7的web標準之道——3：(修正)引起頁面配置混亂的禍首 》 , 《IE7的web標準之道——4：(修正)歌劇院魅影bug 》 以及《IE7的web標準之道——5：(修正)上去了！終於上去了！ 》。如果你有興趣，可以訪問http://justinyoung.cnblogs.com/。謝謝。</p><br /></div><br /></body><br /></html><br />提示：可以先在文字框內，根據需要修改代碼後再運行
在這個測試頁面中，我們在文章主體部分放入了一個小的圖片（一個紅色的方形，在第四行文字中間）。而通過上面對置換元素（replaced element）的定義，我們知道<img>是一種置換元素。這樣，就滿足了bug出現的條件。於是，在IE6中，我們便能夠看到這個bug了（第四行文字的上下文間距出現了問題，從而導致整個布局發生混亂）。如下——
首先讓我們提兩個概念：line-height和font-size，行高和字型大小。line-height減去font-size稱之為“間距（leading）”。間距的一半，稱之為“半間距”。而這個“半間距”會被加在每行文字的上面和下面，於是行與行之間的空隙（有上一段下面的半間距 和 下一段上面的半間距相加而成）就出來了。下面的這幅圖片可能對你理解有所協助。
之所以出現了這種bug，是因為IE6錯誤的將帶有置換元素的那行文字的上下半間距，和相鄰的上下兩行的下上半間距合并到了一起。於是，帶有置換元素的那行文字的上下行距就被減少了一半，所以頁面出現了混亂。
註：雖然上面的文字很好的解釋了bug產生的原因，但是，僅僅是一種參考，並非官方解釋。
殘缺不完美的“HOW？”也許產生的原因並不重要，但是如何修複卻是一定是重要的。畢竟現在IE6的市場份額還是不能忽視的。
非常遺憾，雖然有解決方案，但是並非完美。方法就是對那些置換元素設定margin-top和margin-bottom。以便把被“壓縮”的行間距“撐開”。下面這個範例程式碼，供你參考。如果，你有更好的解決方案，請賜教，謝謝。（可以通過【部落格園web標準設計小組】提交解決方案）
<!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 />#lineheight_bug {<br />line-height: 39px;<br />font-size:14px;<br />background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/rule.gif') no-repeat;<br />padding:0;<br />padding-left:20px;<br />height:435px;<br />width:530px;<br />border:1px solid red;<br />}<br />/* 利用IE6的css hack針對IE6修正bug，關於css hack的知識你可以訪問：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/css-hack.html*/<br />#lineheight_bug img{<br />_margin:17px 0;<br />_vertical-align: middle;<br />}<br /></style><br /></head><br /><body><br /><div id="lineheight_bug"><br /><p>這是一個用來示範line-height bug的執行個體。它來自《IE7的web標準之道——6：(修正)置換元素與行距bug》一文。而這篇文章是屬於《IE7的web標準之道》系列文章的。《IE7的web標準之道》系列文章是個文章系列，主要講解了IE7相對於IE6各個方面的修正和改進。 <img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/wedgits_red.gif" alt="這就是置換元素的一種" /> 對於網頁設計者從將網頁設計從IE6平穩的過渡到IE7平台有一定的指導意義。現在《IE7的web標準之道》系列文章已經出道第六篇了。前面五篇的標題分別是：《IE7的web標準之道——1：前言(兼目錄)》 ,《IE7的web標準之道——2：(改進)更豐富的CSS選擇符》 ,《IE7的web標準之道——3：(修正)引起頁面配置混亂的禍首 》 , 《IE7的web標準之道——4：(修正)歌劇院魅影bug 》 以及《IE7的web標準之道——5：(修正)上去了！終於上去了！ 》。如果你有興趣，可以訪問http://justinyoung.cnblogs.com/。謝謝。</p><br /></div><br /></body><br /></html><br />提示：可以先在文字框內，根據需要修改代碼後再運行
下面是修複後的效果——
修複中用到了針對IE6的css hack。關於css hack的知識，你可以閱讀《執行個體講解符合中國特色的和網路現狀的實用CSS Hack(附源碼) 》一文。
相關文章資源清單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
