IE那些爛事–不能正常顯示的img

     曾經有一張圖片在Firefox下顯示正常，但是在IE下卻顯示灰常，我問IE為什麼做的如此垃圾，旁邊的哥們兒答曰：
因為IE想給其它瀏覽器廠商提供發展的機會。這樣的回答實在是太精闢了！

    在IE下不能正常顯示的問題有種種，其主要原因是我們在開發過程中都是以Firefox作為測試載入器進行開發的。我們採用Firefox作為測試載入器是因為Firefox有著強大的調試功能，是開發人員必不可少的利器之一。而且Firefox對W3C的標準支援比較好，只要Firefox下顯示正常，其它瀏覽器（ＩＥ除外）基本顯示正常。

    現在繼續來說，那個圖片不能正常顯示的問題。首先看一下我的原始代碼：HTML Code:

<img height="20" width="20" class=" startOnClass" title="${resboundle.firstScore}“ />

CSS 樣式表：

 .ecmEvaluationStar .startOnClass{ background-image: url("images/star-on.gif"); background-repeat: no-repeat; text-align: center; width: 20px; height: 20px; display: inline-block;}

    在這裡，Firefox下面能夠正常顯示金色五角星，而IE下卻不能正常顯示，這是為什麼呢？我們來看一下W3C標準下定義的img標籤：

img 元素向網頁中嵌入一幅映像。

請注意，從技術上講，<img> 標籤並不會在網頁中插入映像，而是從網頁上連結映像。<img> 標籤建立的是被引用映像的佔位空間。

<img> 標籤有兩個必需的屬性：src 屬性 和
alt 屬性。

    此處，我們顯示的金色五角星是通過設定背景來顯示圖片，而非通過img標籤來內嵌影像。在IE下，解析器解析img標籤時，一定會尋找src屬性，如果找不到該屬性，就會解析異常。而Firefox在解析img標籤時，如果找不到src屬性，就會將其解析為Div元素。    上述中同樣的代碼，圖片顯示不同，正是由於img標籤缺少了src屬性，不同的瀏覽器解析方式不同所造成的。如果將上述代碼更改為如下代碼就不此問題。    <span height="20" width="20" class="startOffClass" title=" ${resboundle.firstScore} " ></span>    作者編語：Firefox對標籤的解析進行了“人性化”的設計，降低了程式出錯的可能性，但也容易讓初學者追求功能的展示，而忽略了編碼的規範。