HTML5如火如荼，幾個月前的項目要部分應用新技術，尤其是簡單的文檔類型聲明<!DOCTYPE html>（不區分大小寫），非常吸引人。中途因為IE8等在第一次打開網頁時會阻止js執行，停在詢問頁面，導致新的標記無法識別使頁面十分混亂而作罷，但doctype的簡約定義仍在使用。可是在後續做到上圖下文 ...
HTML5如火如荼，幾個月前的項目要部分應用新技術，尤其是簡單的文檔類型聲明<!DOCTYPE html>（不區分大小寫），非常吸引人。中途因為IE8等在第一次打開網頁時會阻止js執行，停在詢問頁面，導致新的標記無法識別使頁面十分混亂而作罷，但doctype的簡約定義仍在使用。可是在後續做到上圖下文的格式時，發現圖片下方會出現莫名空白區域，經驗上是沒問題的，於是翻來覆去的比對，發現唯一不同只在doctype的定義了，替換成舊版的過渡模式確實就變好了，後來發現設置圖片容器的line-height為0也可以，一直對付著用，今天又翻出這個問題，仔細研究下，發現是圖片垂直方向對齊方式和line-height共同作用的結果。
測試代碼如下：
<style type="text/css">
img,div,span{border:none;padding:0;margin:0;}
.example_box{line-height:75px;width:500px;border:10px solid #f60;}
.example_box div{}
.example_box span{font-size:16px;}
</style>
<div class="example_box">
<img src="photo/image5.jpg" height="150" alt=""/>
<div>
<span>標記文字(line-height:75px;)</span>
</div>
</div>
|
預設表現（Firefox下）：
圖1
可以很明顯的看出來<img/>和<div/>之間有個明顯的間距，大小接近<div/>行高的一半。
如果將包含文字的<div/>修改顯示類型為 display:inline-block; ，那麼表現如圖2：
圖2
可以看出圖片和文字的對齊方式是圖1中圖片與文字區域間距的來源。
而間距的大小，則由line-height的值決定，但裡面的比例並不是很清楚，大概在不到一半的水平上。這裡不再貼圖展示，主要討論圖片的垂直對齊方式對問題產生的影響。
圖片的vertical-align屬性值預設為baseline，測試其他幾個屬性，分別如下圖：
圖3（vertical-align:top;）
圖4（vertical-align:text-top;）
圖5（vertical-align:text-bottom;）
圖6（vertical-align:bottom;）
圖7（vertical-align:middle;）
就vertical-align的幾個值來看，
- baseline與text-bottom最接近，但是前者右側的文字更靠下些。這個特性很多地方都能輕易的看到，如圖8插入了表情的微博。開心網的狀態和記錄對此做了調整；
- text-top、text-bottom對齊的是inline包含文字的區域（這個區域不是line-height決定，而是font-size和瀏覽器對inline區域預設表現共同決定。關於inline區域不同瀏覽器表現比較複雜，這裡不予討論）；
- top、bottom、middle可以很好的對圖片在一行里的定位精確處理。
圖8 第三行明顯文字被表情影響了行距（chrome下新浪微博）
綜上所述，圖片下的莫名占位空白問題是vertical-align屬性和line-height值共同決定的，前者是導致問題的原因，後者基本決定空白的大小。
該可以有三種解決辦法：
- 取消<!DOCTYPE html>這種html5的應用方式，恢復到傳統的過渡模式
- 為<img/>設置一個容器，如<div/>，然後設置該容器的line-height:0;
- 定義圖片的vertical-align屬性，根據實際情況從top、bottom、middle中選取是比較安全的方式
我只是發現了這個現象，並總結了可能的影響因素，至於為什麼在html5模式下表現為這樣還不得而知，希望哪位知道的能不辭吝教，歡迎大家指正。
